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

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

@@ -13,8 +13,13 @@ export const getOfferDetails = (offer) => {
     const offerImg = offer.metadata?.image;
     const animationUrl = getOfferAnimationUrl(offer);
     const shippingInfo = {
-        returnPeriodInDays: productV1ItemMetadataEntity?.shipping?.returnPeriodInDays,
-        shippingTable: productV1ItemMetadataEntity?.shipping?.supportedJurisdictions?.map((jurisdiction) => ({
+        returnPeriodInDays: productV1ItemMetadataEntity?.shipping?.returnPeriodInDays ||
+            isProductV1(offer)
+            ? offer.metadata.shipping?.returnPeriodInDays
+            : undefined,
+        shippingTable: (productV1ItemMetadataEntity?.shipping || isProductV1(offer)
+            ? offer.metadata.shipping
+            : undefined)?.supportedJurisdictions?.map((jurisdiction) => ({
             name: jurisdiction.label,
             value: jurisdiction.deliveryTime
         })) || []
@@ -22,12 +27,19 @@ export const getOfferDetails = (offer) => {
     const description = productV1ItemMetadataEntity?.product?.description ||
         offer.metadata?.description ||
         "";
-    const artist = productV1ItemMetadataEntity?.productV1Seller || null;
+    const artist = productV1ItemMetadataEntity?.productV1Seller ||
+        (isProductV1(offer)
+            ? offer.metadata.productV1Seller
+            : null);
     const artistDescription = artist?.description ||
         productV1ItemMetadataEntity?.product.productV1Seller?.description ||
         "";
-    const images = productV1ItemMetadataEntity?.product?.visuals_images?.map(({ url }) => url) || [];
-    const variantsImages = productV1ItemMetadataEntity?.productOverrides?.visuals_images?.map(({ url }) => url) || [];
+    const images = (productV1ItemMetadataEntity?.product ||
+        (isProductV1(offer)
+            ? offer.metadata.product
+            : undefined))?.visuals_images?.map(({ url }) => url) || [];
+    const variantsImages = (productV1ItemMetadataEntity ||
+        (isProductV1(offer) ? offer.metadata : undefined))?.productOverrides?.visuals_images?.map(({ url }) => url) || [];
     const bundleItems = isBundle(offer) ? offer.metadata.items : undefined;
     const nftItems = bundleItems
         ? bundleItems.filter((item) => isNftItem(item))

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

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

package/package.json

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

package/src/components/Loading.tsx

@@ -10,7 +10,7 @@ const loadingAnimation = keyframes`
  100% { transform: rotate(360deg); }
 `;
 
-const LoadingStyle = styled.span`
+const LoadingStyle = styled.span.attrs({ className: "loading" })`
   width: 25px;
   height: 25px;
   border: 5px solid #fff;

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

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

package/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx

@@ -134,6 +134,9 @@ export default function Confirmation({
   const [zipField] = useField(FormModel.formFields.zip.name);
   const [countryField] = useField(FormModel.formFields.country.name);
   const [emailField] = useField(FormModel.formFields.email.name);
+  const [walletAddressField] = useField(
+    FormModel.formFields.walletAddress.name
+  );
   const [phoneField] = useField(FormModel.formFields.phone.name);
   const redemptionInfo = {
     exchangeId,
@@ -249,7 +252,8 @@ ${FormModel.formFields.state.placeholder}: ${message.deliveryDetails.state}
 ${FormModel.formFields.zip.placeholder}: ${message.deliveryDetails.zip}
 ${FormModel.formFields.country.placeholder}: ${message.deliveryDetails.country}
 ${FormModel.formFields.email.placeholder}: ${message.deliveryDetails.email}
-${FormModel.formFields.phone.placeholder}: ${message.deliveryDetails.phone}`;
+${FormModel.formFields.phone.placeholder}: ${message.deliveryDetails.phone}
+${FormModel.formFields.walletAddress.placeholder}: ${message.deliveryDetails.walletAddress}`;
 
       const newMessage = {
         threadId: {
@@ -300,6 +304,7 @@ ${FormModel.formFields.phone.placeholder}: ${message.deliveryDetails.phone}`;
           <div>{zipField.value}</div>
           <div>{countryField.value}</div>
           <div>{emailField.value}</div>
+          <div>{walletAddressField.value}</div>
           <div>{phoneField.value}</div>
         </Grid>
         <Grid flexDirection="row" flexBasis="0">

package/src/components/modal/components/Redeem/RedeemForm/RedeemForm.tsx

@@ -1,17 +1,22 @@
 import React from "react";
+import type { Country as CountryCode } from "react-phone-number-input";
 import { useBreakpoints } from "../../../../../hooks/useBreakpoints";
+import { BuyerTransferInfo } from "../../../../../lib/bundle/const";
+import { getHasBuyerTransferInfos } from "../../../../../lib/offer/filter";
+import { Exchange } from "../../../../../types/exchange";
 import { Button } from "../../../../buttons/Button";
+import { CountrySelect } from "../../../../form/CountrySelect";
 import Input from "../../../../form/Input";
 import Phone from "../../../../form/Phone";
 import { Grid } from "../../../../ui/Grid";
 import { Typography } from "../../../../ui/Typography";
 import { FormModel } from "../RedeemFormModel";
-import { CountrySelect } from "../../../../form/CountrySelect";
-import type { Country as CountryCode } from "react-phone-number-input";
 interface Props {
+  exchange: Exchange | null;
   isValid: boolean;
   onNextClick: () => void;
   onBackClick: () => void;
+  setConnectedWalletAddress: () => void;
 }
 
 // https://www.fatf-gafi.org/en/countries.html
@@ -55,11 +60,18 @@ const fatfMemberCountries: CountryCode[] = [
 ];
 
 export default function RedeemForm({
+  exchange,
   isValid,
   onNextClick,
-  onBackClick
+  onBackClick,
+  setConnectedWalletAddress
 }: Props) {
   const { isLteXS } = useBreakpoints();
+  const requestBuyerAddress = exchange?.offer
+    ? getHasBuyerTransferInfos(exchange.offer, [
+        BuyerTransferInfo.walletAddress
+      ])
+    : false;
   return (
     <>
       <Typography
@@ -142,6 +154,23 @@ export default function RedeemForm({
             placeholder={FormModel.formFields.email.placeholder}
           />
         </Grid>
+        {requestBuyerAddress && (
+          <Grid gap="1rem">
+            <Grid flexDirection="column" alignItems="flex-start">
+              <Input
+                name={FormModel.formFields.walletAddress.name}
+                placeholder={FormModel.formFields.walletAddress.placeholder}
+              />
+            </Grid>
+            <Button
+              variant="secondaryFill"
+              onClick={() => setConnectedWalletAddress()}
+              style={{ whiteSpace: "nowrap" }}
+            >
+              Use my wallet address
+            </Button>
+          </Grid>
+        )}
         <Grid flexDirection="column" alignItems="flex-start">
           <Phone
             name={FormModel.formFields.phone.name}

package/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx

@@ -14,13 +14,15 @@ interface Props {
   isValid: boolean;
   onNextClick: () => void;
   onBackClick: () => void;
+  setConnectedWalletAddress: () => void;
 }
 
 export default function RedeemFormView({
   exchange,
   isValid,
   onNextClick,
-  onBackClick
+  onBackClick,
+  setConnectedWalletAddress
 }: Props) {
   const { address } = useAccount();
   const dispatch = useNonModalContext();
@@ -45,9 +47,11 @@ export default function RedeemFormView({
         <p>Invalid exchange state.</p>
       ) : (
         <RedeemForm
+          exchange={exchange}
           isValid={isValid}
           onNextClick={onNextClick}
           onBackClick={onBackClick}
+          setConnectedWalletAddress={setConnectedWalletAddress}
         />
       )}
     </>

package/src/components/modal/components/Redeem/RedeemFormModel.ts

@@ -36,6 +36,12 @@ export const FormModel = {
       placeholder: "Email",
       mustBeEmail: "This is not an e-mail"
     },
+    walletAddress: {
+      name: "walletAddress",
+      requiredErrorMessage: "This field is required",
+      placeholder: "Wallet Address: Required to receive the digital item/s",
+      mustBeWalletAddress: "This is not a wallet address"
+    },
     phone: {
       name: "phone",
       requiredErrorMessage: "This field is required",
@@ -44,4 +50,4 @@ export const FormModel = {
   }
 } as const;
 
-export type FormType = Record<keyof typeof FormModel["formFields"], string>;
+export type FormType = Record<keyof (typeof FormModel)["formFields"], string>;

package/src/components/modal/components/Redeem/RedeemNonModal.tsx

@@ -56,6 +56,8 @@ import {
   DetailContextProps,
   DetailViewProvider
 } from "../common/detail/DetailViewProvider";
+import { getHasBuyerTransferInfos } from "../../../../lib/offer/filter";
+import { BuyerTransferInfo } from "../../../../lib/bundle/const";
 
 const colors = theme.colors.light;
 const UlWithWordBreak = styled.ul`
@@ -328,6 +330,11 @@ function RedeemNonModal({
   const emailPreference =
     exchange?.seller.metadata?.contactPreference ===
     ContactPreference.XMTP_AND_EMAIL;
+  const requestBuyerAddress = exchange?.offer
+    ? getHasBuyerTransferInfos(exchange.offer, [
+        BuyerTransferInfo.walletAddress
+      ])
+    : false;
   const validationSchema = useMemo(() => {
     return Yup.object({
       [FormModel.formFields.name.name]: Yup.string()
@@ -356,11 +363,21 @@ function RedeemNonModal({
             .required(FormModel.formFields.email.requiredErrorMessage)
             .email(FormModel.formFields.email.mustBeEmail)
         : Yup.string().trim().email(FormModel.formFields.email.mustBeEmail),
+      [FormModel.formFields.walletAddress.name]: requestBuyerAddress
+        ? Yup.string()
+            .trim()
+            .required(FormModel.formFields.walletAddress.requiredErrorMessage)
+            .test(
+              "mustBeAddress",
+              FormModel.formFields.walletAddress.mustBeWalletAddress,
+              (value) => (value ? ethers.utils.isAddress(value) : true)
+            )
+        : Yup.string().trim(),
       [FormModel.formFields.phone.name]: Yup.string()
         .trim()
         .required(FormModel.formFields.phone.requiredErrorMessage)
     });
-  }, [emailPreference]);
+  }, [emailPreference, requestBuyerAddress]);
   type FormType = Yup.InferType<typeof validationSchema>;
   const [{ currentStep }, setStep] = useState<{
     previousStep: ActiveStep[];
@@ -495,12 +512,13 @@ function RedeemNonModal({
             [FormModel.formFields.zip.name]: "",
             [FormModel.formFields.country.name]: "",
             [FormModel.formFields.email.name]: "",
+            [FormModel.formFields.walletAddress.name]: "",
             [FormModel.formFields.phone.name]: ""
           }
         }
         validateOnMount
       >
-        {({ errors }) => {
+        {({ errors, setFieldValue }) => {
           const isRedeemFormOK =
             !errors[FormModel.formFields.name.name] &&
             !errors[FormModel.formFields.streetNameAndNumber.name] &&
@@ -509,6 +527,7 @@ function RedeemNonModal({
             !errors[FormModel.formFields.zip.name] &&
             !errors[FormModel.formFields.country.name] &&
             !errors[FormModel.formFields.email.name] &&
+            !errors[FormModel.formFields.walletAddress.name] &&
             !errors[FormModel.formFields.phone.name];
 
           return (
@@ -646,6 +665,14 @@ function RedeemNonModal({
                     setActiveStep(ActiveStep.REDEEM_FORM_CONFIRMATION)
                   }
                   isValid={isRedeemFormOK}
+                  setConnectedWalletAddress={() => {
+                    if (address) {
+                      setFieldValue(
+                        FormModel.formFields.walletAddress.name,
+                        address
+                      );
+                    }
+                  }}
                 />
               ) : currentStep === ActiveStep.EXCHANGE_POLICY ? (
                 <RedeemOfferPolicyView

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