@bosonprotocol/react-kit 0.30.0-alpha.1 → 0.30.0-alpha.10

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

@@ -3,16 +3,23 @@ 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";
 import DetailTable from "../detail/DetailTable";
 import { SlickSlider, initialSettings } from "../detail/SlickSlider";
 import {
+  buyerTransferInfoMapping,
   digitalNftTypeMapping,
-  digitalTypeMappingDisplay
+  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 {
@@ -26,6 +33,9 @@ const StyledDetailsSummary = styled(DetailsSummary)`
 const MediaWrapper = styled.div`
   width: 100%;
   height: 100%;
+  .loading-container {
+    padding-top: 100%;
+  }
 `;
 type DigitalProductDataProps = {
   offer: Offer;
@@ -36,7 +46,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"
@@ -45,105 +60,157 @@ 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>
+          ) : (
+            <MediaWrapper></MediaWrapper>
+          );
+          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
+                    : []),
+                  ...(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
+                        ]
+                          ? digitalTypeMappingDisplay[
+                              attribute.value as keyof typeof digitalTypeMappingDisplay
                             ]
-                          ? digitalNftTypeMapping[
-                              attribute.value as keyof typeof digitalNftTypeMapping
+                          : 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
                             ]
-                          : attribute.value}
-                    </Typography>
-                  )
-                })),
-                ...(nftItem.tokenIdRange?.min && nftItem.tokenIdRange.max
-                  ? [
-                      {
-                        name: "Token IDs",
-                        value: (
-                          <Typography tag="p">
-                            {nftItem.tokenIdRange?.max}-
-                            {nftItem.tokenIdRange?.max}
-                          </Typography>
-                        )
-                      }
-                    ]
-                  : []),
-                ...(nftItem.terms || []).map((term) => ({
-                  name: term.displayKey || term.key,
-                  value: <Typography tag="p">{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,19 +1,22 @@
 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 { digitalTypeMappingDisplay } from "../../../../../lib/bundle/const";
 const colors = theme.colors.light;
 const imageSize = "2.5rem";
 
@@ -23,6 +26,17 @@ const MediaWrapper = styled.div`
   height: ${imageSize};
   min-width: ${imageSize};
   overflow: hidden;
+  .loading-container {
+    padding-top: 100%;
+  }
+`;
+const Pill = styled.div`
+  border: 3px solid ${({ theme }) => theme?.colors?.light.accent};
+  background: white;
+  white-space: nowrap;
+  min-width: 9ch;
+  box-sizing: content-box;
+  text-align: center;
 `;
 const ActionText = ({ children }: { children: ReactNode }) => {
   return <span style={{ fontSize: "0.75rem" }}>{children}</span>;
@@ -50,27 +64,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>
@@ -83,16 +77,22 @@ export const PhygitalProduct: React.FC<PhygitalProductProps> = ({ offer }) => {
         <Grid as="ul" flexDirection="column" gap="1rem" padding="0">
           {bundleItems?.map((bundleItem, index) => {
             let quantity = 1;
-            let name: string;
+            let name: string | ReactNode;
             let contract: string | undefined | null;
             let imageSrc: string | undefined | null;
             let videoSrc: string | undefined | null;
             let rangeText: JSX.Element | undefined | null;
+            let pill: ReactNode | undefined | null;
             if (isProductV1Item(bundleItem)) {
               quantity = 1;
               name = bundleItem.product.title;
-              imageSrc = bundleItem.product.visuals_images?.[0]?.url;
-              videoSrc = bundleItem.product.visuals_videos?.[0]?.url;
+              imageSrc =
+                bundleItem.productOverrides?.visuals_images?.[0]?.url ||
+                bundleItem.product.visuals_images?.[0]?.url;
+              videoSrc =
+                bundleItem.productOverrides?.visuals_videos?.[0]?.url ||
+                bundleItem.product.visuals_videos?.[0]?.url;
+              pill = <Pill>Physical</Pill>;
             } else if (isNftItem(bundleItem)) {
               quantity = bundleItem.quantity || 1;
               name =
@@ -101,7 +101,22 @@ export const PhygitalProduct: React.FC<PhygitalProductProps> = ({ offer }) => {
                 erc1155Names?.[index] ||
                 "Untitled";
               contract = bundleItem.contract;
-              imageSrc = ercImages?.[index] || bundleItem.image;
+              if (name === contract && typeof name === "string" && contract) {
+                name = (
+                  <Tooltip
+                    content={contract}
+                    maxWidth="none"
+                    interactive
+                    hideOnClick={false}
+                    wrap={false}
+                  >
+                    <span style={{ wordBreak: "keep-all" }}>
+                      {formatAddress(contract)}
+                    </span>
+                  </Tooltip>
+                );
+              }
+              imageSrc = images?.[index];
               videoSrc = bundleItem.animationUrl;
               rangeText =
                 bundleItem.tokenIdRange?.min ||
@@ -124,6 +139,22 @@ export const PhygitalProduct: React.FC<PhygitalProductProps> = ({ offer }) => {
                       : `IDs: ${bundleItem.tokenIdRange?.min}-${bundleItem.tokenIdRange?.max}`}
                   </span>
                 ) : null;
+              const type = bundleItem.attributes?.find(
+                (attribute) => attribute.traitType === "type"
+              );
+              pill =
+                type &&
+                digitalTypeMappingDisplay[
+                  type.value as keyof typeof digitalTypeMappingDisplay
+                ] ? (
+                  <Pill>
+                    {
+                      digitalTypeMappingDisplay[
+                        type.value as keyof typeof digitalTypeMappingDisplay
+                      ]
+                    }
+                  </Pill>
+                ) : null;
             } else {
               name = "Unknown";
             }
@@ -141,17 +172,27 @@ 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}
+                ) : (
+                  <MediaWrapper></MediaWrapper>
+                )}
+                {pill}
                 <div>{quantity}x</div>
-                <Grid flexDirection="column" alignItems="flex-start">
+                <Grid
+                  flexDirection="column"
+                  alignItems="flex-start"
+                  style={{ wordBreak: "break-all" }}
+                >
                   {name} {rangeText}
                 </Grid>
                 {contract && (
@@ -162,7 +203,7 @@ export const PhygitalProduct: React.FC<PhygitalProductProps> = ({ offer }) => {
                     style={{ flex: 0 }}
                   >
                     <ThemedButton size="regular" themeVal="blankSecondary">
-                      <ActionText>Buy</ActionText>{" "}
+                      <ActionText>Contract</ActionText>{" "}
                       <ArrowSquareUpRight size="16" />
                     </ThemedButton>
                   </a>

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 {