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

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 {

package/src/components/tooltip/Tooltip.tsx

@@ -4,12 +4,12 @@ import "tippy.js/themes/light-border.css";
 
 import Tippy, { TippyProps } from "@tippyjs/react";
 import { IconWeight, Question } from "phosphor-react";
-import React from "react";
+import React, { ReactNode } from "react";
 import styled from "styled-components";
 
 import { theme } from "../../theme";
 
-export interface TooltipProps extends TippyProps {
+export interface TooltipProps extends Omit<TippyProps, "children"> {
   content: React.ReactNode;
   interactive?: boolean;
   size?: number;
@@ -37,6 +37,7 @@ export interface TooltipProps extends TippyProps {
     | "click"
     | "focusin"
     | "manual";
+  children?: ReactNode;
 }
 
 const Button = styled.button`

package/src/components/ui/DetailsSummary.tsx

@@ -78,7 +78,7 @@ export const DetailsSummary: React.FC<DetailsSummaryProps> = ({
   children,
   className,
   initiallyOpen,
-  isOpen,
+  isOpen = initiallyOpen,
   onSetOpen,
   icon,
   $paddingSides = "2rem"

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,17 +107,28 @@ 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";
 
   return (
     <>
-      <ImageWrapper {...rest} $hide={!isLoading}>
+      <ImageWrapper {...rest} $hide={!isLoading} className="loading-container">
         <ImagePlaceholder>
           <Typography tag="div">
             <Loading />

package/src/components/ui/Typography.tsx

@@ -86,10 +86,7 @@ export type TypographyProps = WrapperProps &
     className?: string;
   };
 
-export const Typography: React.FC<TypographyProps> = forwardRef<
-  HTMLDivElement,
-  TypographyProps
->(
+export const Typography = forwardRef<HTMLDivElement, TypographyProps>(
   (
     { tag = "div", children, style = {}, className, onClick, ...props },
     ref

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