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

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.0",
+  "version": "0.30.0-alpha.10",
   "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.7",
+    "@bosonprotocol/ethers-sdk": "^1.14.2-alpha.7",
     "@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": "1744a55c4f2f38bb9b75623c0943ccd555633467"
+  "gitHead": "2ad3993ba803cddd58944c0205c51f186b073dcf"
 }

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/buttons/CommitButtonView.tsx

@@ -5,15 +5,6 @@ import styled, { CSSProperties, css } from "styled-components";
 import { IButton } from "../ui/ThemedButton";
 import { SvgImage } from "../ui/SvgImage";
 import { Grid } from "../ui/Grid";
-
-const Wrapper = styled.div`
-  width: fit-content;
-  height: fit-content;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
 const StyledButton = styled(Button)<{
   $color: CommitButtonViewProps["color"];
   $shape: CommitButtonViewProps["shape"];
@@ -32,12 +23,41 @@ const StyledButton = styled(Button)<{
     return "";
   }}
   svg * {
+    fill: black;
+  }
+  &:not(:disabled) svg * {
     fill: ${({ $color }) => ($color === "black" ? "white" : "black")};
   }
   &:hover:not(:disabled) * {
     fill: ${({ $color }) => ($color === "black" ? "black" : "white")};
   }
 `;
+const Tagline = styled.div`
+  margin-top: 3px;
+  cursor: pointer;
+  color: black;
+  text-shadow:
+    0.07em 0 white,
+    0 0.07em white,
+    -0.07em 0 white,
+    0 -0.07em white,
+    -0.07em -0.07em white,
+    -0.07em 0.07em white,
+    0.07em -0.07em white,
+    0.07em 0.07em white;
+`;
+
+const Wrapper = styled.div`
+  width: fit-content;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  ${StyledButton} {
+    transition: background 150ms ease-in-out;
+  }
+`;
 
 export type CommitButtonViewProps = {
   disabled?: boolean;
@@ -47,10 +67,8 @@ export type CommitButtonViewProps = {
   minHeight?: CSSProperties["minHeight"];
   color?: "green" | "black" | "white";
   shape?: "sharp" | "rounded" | "pill";
-} & (
-  | { onTaglineClick: MouseEventHandler<HTMLDivElement>; tagline: true }
-  | { onTaglineClick?: undefined; tagline?: false }
-);
+  onTaglineClick?: MouseEventHandler<HTMLDivElement>;
+};
 
 const colorToVariant = {
   green: "bosonPrimary",
@@ -70,7 +88,6 @@ export const CommitButtonView = forwardRef<
       minHeight,
       layout = "horizontal",
       color = "green",
-      tagline = true,
       onTaglineClick,
       shape = "sharp"
     },
@@ -103,15 +120,10 @@ export const CommitButtonView = forwardRef<
             />
           </Grid>
         </StyledButton>
-        {tagline && (
-          <div
-            role="button"
-            onClick={onTaglineClick}
-            style={{ cursor: "pointer" }}
-          >
-            What is a physical NFT?
-          </div>
-        )}
+
+        <Tagline role="button" onClick={onTaglineClick}>
+          What is a physical NFT?
+        </Tagline>
       </Wrapper>
     );
   }

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