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

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

@@ -1,4 +1,3 @@
-import * as Sentry from "@sentry/browser";
 import { Form, Formik, FormikProps } from "formik";
 import React, {
   useCallback,
@@ -7,7 +6,6 @@ import React, {
   useRef,
   useState
 } from "react";
-import { useDisconnect } from "wagmi";
 import * as Yup from "yup";
 import { Exchange } from "../../../../types/exchange";
 import {
@@ -21,24 +19,21 @@ import { RedeemOfferPolicyView } from "./OfferPolicyView/RedeemOfferPolicyView";
 import RedeemFormView from "./RedeemForm/RedeemFormView";
 import { FormModel } from "./RedeemFormModel";
 
-import { subgraph } from "@bosonprotocol/core-sdk";
-import { ethers } from "ethers";
-import styled from "styled-components";
 import { useAccount } from "../../../../hooks/connection/connection";
 import { useCurrentSellers } from "../../../../hooks/useCurrentSellers";
-import { theme } from "../../../../theme";
-import { isTruthy } from "../../../../types/helpers";
+import { getCssVar } from "../../../../theme";
 import { Loading } from "../../../ui/loading/Loading";
-import { useConfigContext } from "../../../config/ConfigContext";
 import { Typography } from "../../../ui/Typography";
 import {
   RedemptionContextProps,
-  RedemptionWidgetAction,
   useRedemptionContext
 } from "../../../widgets/redemption/provider/RedemptionContext";
+import {
+  useRedemptionWidgetContext,
+  RedemptionWidgetAction
+} from "../../../widgets/redemption/provider/RedemptionWidgetContext";
 import NonModal, { NonModalProps } from "../../nonModal/NonModal";
 import { BosonLogo } from "../common/BosonLogo";
-import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
 import StepsOverview from "../common/StepsOverview/StepsOverview";
 import { ExchangeFullDescriptionView } from "./ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView";
 import { ExchangeView, ExchangeViewProps } from "./ExchangeView/ExchangeView";
@@ -51,140 +46,21 @@ import {
   ExpireVoucherView,
   ExpireVoucherViewProps
 } from "./ExchangeView/expireVoucher/ExpireVoucherView";
-import { ContactPreference } from "./const";
+import { ContactPreference, getRedeemFormValidationSchema } from "./const";
 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`
-  * > {
-    word-break: break-word;
-  }
-`;
-const checkSignatures = ({
-  doFetchSellersFromSellerIds,
-  parentOrigin,
-  sellerIds,
-  signatures,
-  sellersFromSellerIds,
-  areSignaturesMandatory
-}: Pick<RedeemNonModalProps, "parentOrigin" | "sellerIds" | "signatures"> & {
-  doFetchSellersFromSellerIds: boolean;
-  sellersFromSellerIds:
-    | (subgraph.SellerFieldsFragment & {
-        lensOwner?: string | null | undefined;
-      })[]
-    | undefined;
-  areSignaturesMandatory: boolean;
-}) => {
-  try {
-    if (areSignaturesMandatory && !sellerIds) {
-      return (
-        <p>
-          SellerIds must be defined as these are defined postDeliveryInfoUrl,
-          deliveryInfoHandler, redemptionSubmittedHandler,
-          redemptionConfirmedHandler{" "}
-        </p>
-      );
-    }
-    if (
-      sellerIds?.length &&
-      areSignaturesMandatory &&
-      (!signatures || signatures?.filter(isTruthy).length !== sellerIds.length)
-    ) {
-      return (
-        <p>
-          Please provide a list of signatures of the message{" "}
-          {JSON.stringify({ origin: "<parentWindowOrigin>" })} for each seller
-          in sellerIds list
-        </p>
-      );
-    }
-    if (
-      doFetchSellersFromSellerIds &&
-      (!sellersFromSellerIds ||
-        sellersFromSellerIds.length !== sellerIds?.length)
-    ) {
-      return (
-        <p>
-          Could not retrieve sellers from the specified sellerIds{" "}
-          {sellerIds?.join(",")}
-        </p>
-      );
-    }
-    const originMessage = JSON.stringify({ origin: parentOrigin });
-    const firstIndexSignatureThatDoesntMatch = sellersFromSellerIds?.findIndex(
-      ({ assistant }, index) => {
-        if (!signatures?.[index]) {
-          return true;
-        }
-        const signerAddr = ethers.utils
-          .verifyMessage(originMessage, signatures[index])
-          .toLowerCase();
-
-        if (signerAddr.toLowerCase() !== assistant.toLowerCase()) {
-          return true;
-        }
-        return false;
-      }
-    );
-    if (
-      firstIndexSignatureThatDoesntMatch !== undefined &&
-      firstIndexSignatureThatDoesntMatch !== -1 &&
-      sellersFromSellerIds &&
-      signatures
-    ) {
-      return (
-        <div>
-          <p>Signature does not match.</p>
-          <UlWithWordBreak>
-            <li>Signatures: {signatures}</li>
-            <li>
-              Seller assistant address is{" "}
-              {sellersFromSellerIds[
-                firstIndexSignatureThatDoesntMatch
-              ]?.assistant?.toLowerCase()}
-            </li>
-            <li>
-              Address that signed the message:{" "}
-              {signatures
-                ? ethers.utils
-                    .verifyMessage(
-                      originMessage,
-                      signatures[firstIndexSignatureThatDoesntMatch]
-                    )
-                    .toLowerCase()
-                : "(no signatures)"}
-            </li>
-            <li>
-              Received signature for this seller:{" "}
-              {signatures?.[firstIndexSignatureThatDoesntMatch]}
-            </li>
-            <li>Message used to verify signature: {originMessage}</li>
-          </UlWithWordBreak>
-        </div>
-      );
-    }
-  } catch (error) {
-    console.error(error);
-    Sentry.captureException(error);
-    return (
-      <p>
-        Something went wrong: {error instanceof Error && <b>{error.message}</b>}
-      </p>
-    );
-  }
-};
+import { useDisconnect } from "../../../../hooks/connection/useDisconnect";
+import { mockedDeliveryAddress } from "../../../widgets/redemption/const";
+import { checkSignatures } from "./checkSignatures";
 
 enum ActiveStep {
   STEPS_OVERVIEW,
   MY_ITEMS,
   EXCHANGE_VIEW,
-  PURCHASE_OVERVIEW,
   REDEEM_FORM,
   REDEEM_FORM_CONFIRMATION,
   REDEEM_SUCESS,
@@ -215,7 +91,6 @@ export type RedeemNonModalProps = Pick<
     myItemsOnRaiseDisputeClick?: MyItemsProps["onRaiseDisputeClick"];
     myItemsOnAvatarClick?: MyItemsProps["onAvatarClick"];
     onExchangePolicyClick?: ExchangeViewProps["onExchangePolicyClick"];
-    exchangeViewOnPurchaseOverview?: ExchangeViewProps["onPurchaseOverview"];
     exchangeViewOnViewFullDescription?: ExchangeViewProps["onViewFullDescription"];
     exchangeViewOnCancelExchange?: ExchangeViewProps["onCancelExchange"];
     exchangeViewOnExpireVoucherClick?: ExchangeViewProps["onExpireVoucherClick"];
@@ -227,10 +102,12 @@ export type RedeemNonModalProps = Pick<
     parentOrigin?: string | null;
     signatures?: string[] | undefined | null;
     withExternalSigner: boolean | undefined | null;
+    showBosonLogoInFooter?: boolean;
   };
 
 export function PublicRedeemNonModal({
   hideModal,
+  showBosonLogoInFooter = true,
   ...props
 }: RedeemNonModalProps) {
   return (
@@ -242,13 +119,17 @@ export function PublicRedeemNonModal({
           Redeem your item
         </Typography>
       }
-      footerComponent={<BosonLogo />}
+      footerComponent={showBosonLogoInFooter ? <BosonLogo /> : null}
       showConnectButton={!props.withExternalSigner}
       contentStyle={{
-        background: colors.white
+        background: getCssVar("--background-accent-color")
       }}
     >
-      <RedeemNonModal hideModal={hideModal} {...props} />
+      <RedeemNonModal
+        hideModal={hideModal}
+        showBosonLogoInFooter={showBosonLogoInFooter}
+        {...props}
+      />
     </NonModal>
   );
 }
@@ -268,10 +149,7 @@ const getInitialStep = (
             ? ActiveStep.EXCHANGE_VIEW
             : ActiveStep.REDEEM_FORM_CONFIRMATION;
 };
-const getPreviousSteps = (
-  widgetAction: RedemptionWidgetAction,
-  showRedemptionOverview: boolean
-) => {
+const getPreviousSteps = (widgetAction: RedemptionWidgetAction) => {
   return widgetAction === RedemptionWidgetAction.CONFIRM_REDEEM
     ? [ActiveStep.REDEEM_FORM]
     : [];
@@ -287,7 +165,6 @@ function RedeemNonModal({
   myItemsOnRaiseDisputeClick,
   myItemsOnAvatarClick,
   onExchangePolicyClick,
-  exchangeViewOnPurchaseOverview,
   exchangeViewOnViewFullDescription,
   exchangeViewOnCancelExchange,
   exchangeViewOnExpireVoucherClick,
@@ -303,7 +180,8 @@ function RedeemNonModal({
   redemptionConfirmedHandler,
   onClickBuyOrSwap,
   signatures,
-  parentOrigin
+  parentOrigin,
+  showBosonLogoInFooter = true
 }: RedeemNonModalProps) {
   const areSignaturesMandatory = !!(
     postDeliveryInfoUrl ||
@@ -320,12 +198,9 @@ function RedeemNonModal({
     sellerIds: sellerIds,
     enabled: doFetchSellersFromSellerIds
   });
-  const {
-    showRedemptionOverview,
-    widgetAction,
-    exchangeState,
-    deliveryInfo: initialDeliveryInfo
-  } = useRedemptionContext();
+  const { deliveryInfo: initialDeliveryInfo } = useRedemptionContext();
+  const { showRedemptionOverview, widgetAction, exchangeState } =
+    useRedemptionWidgetContext();
 
   const emailPreference =
     exchange?.seller.metadata?.contactPreference ===
@@ -336,46 +211,9 @@ function RedeemNonModal({
       ])
     : false;
   const validationSchema = useMemo(() => {
-    return Yup.object({
-      [FormModel.formFields.name.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.name.requiredErrorMessage),
-      [FormModel.formFields.streetNameAndNumber.name]: Yup.string()
-        .trim()
-        .required(
-          FormModel.formFields.streetNameAndNumber.requiredErrorMessage
-        ),
-      [FormModel.formFields.city.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.city.requiredErrorMessage),
-      [FormModel.formFields.state.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.state.requiredErrorMessage),
-      [FormModel.formFields.zip.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.zip.requiredErrorMessage),
-      [FormModel.formFields.country.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.country.requiredErrorMessage),
-      [FormModel.formFields.email.name]: emailPreference
-        ? Yup.string()
-            .trim()
-            .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)
+    return getRedeemFormValidationSchema({
+      emailPreference,
+      requestBuyerAddress
     });
   }, [emailPreference, requestBuyerAddress]);
   type FormType = Yup.InferType<typeof validationSchema>;
@@ -383,13 +221,10 @@ function RedeemNonModal({
     previousStep: ActiveStep[];
     currentStep: ActiveStep;
   }>({
-    previousStep: getPreviousSteps(widgetAction, showRedemptionOverview),
+    previousStep: getPreviousSteps(widgetAction),
     currentStep: getInitialStep(widgetAction, showRedemptionOverview)
   });
 
-  const { config: coreConfig } = useConfigContext();
-  const defaultDisputeResolverId = coreConfig?.defaultDisputeResolverId;
-
   const setActiveStep = (newCurrentStep: ActiveStep) => {
     setStep((prev) => ({
       previousStep: [...prev.previousStep, prev.currentStep],
@@ -418,12 +253,7 @@ function RedeemNonModal({
     }
   }, [currentStep]);
   const { address } = useAccount();
-  const { disconnectAsync, status } = useDisconnect();
-  const disconnect = useCallback(() => {
-    if (disconnectAsync && status !== "loading") {
-      disconnectAsync();
-    }
-  }, [disconnectAsync, status]);
+  const disconnect = useDisconnect();
 
   useEffect(() => {
     // if the user disconnects their wallet amid redeem, cancellation, etc process, reset current flow
@@ -456,13 +286,13 @@ function RedeemNonModal({
     forcedAccount.toLowerCase() !== address.toLowerCase()
   ) {
     // force disconnection as the current connected wallet is not the forced one
-    disconnect();
+    disconnect({ isUserDisconnecting: false });
   }
 
   if (!address) {
     return (
       <>
-        <p>Please connect your wallet</p>
+        <p>Please connect your account</p>
         {forcedAccount && <p>(expected account: {forcedAccount})</p>}
       </>
     );
@@ -482,21 +312,13 @@ function RedeemNonModal({
   if (jsx) {
     return jsx;
   }
-  const deliveryAddressVar =
-    typeof process !== "undefined"
-      ? process?.env?.REACT_APP_DELIVERY_ADDRESS_MOCK || // @ts-expect-error import.meta.env only exists in vite environments
-        import.meta?.env?.REACT_APP_DELIVERY_ADDRESS_MOCK
-      : // @ts-expect-error import.meta.env only exists in vite environments
-        import.meta?.env?.REACT_APP_DELIVERY_ADDRESS_MOCK;
-  const mockedDeliveryAddress = deliveryAddressVar
-    ? JSON.parse(deliveryAddressVar)
-    : undefined;
 
   const handleRaiseDispute = (exchangeId: string | undefined) => {
     const raiseDisputeForExchangeUrlWithId =
       raiseDisputeForExchangeUrl?.replace("{id}", exchangeId || "");
     if (raiseDisputeForExchangeUrlWithId) {
-      window.open(raiseDisputeForExchangeUrlWithId, "_blank");
+      const windowToUse = window.top || window.parent;
+      windowToUse.open(raiseDisputeForExchangeUrlWithId, "_blank");
     }
   };
   const onContractualAgreementClick = () => {
@@ -537,9 +359,14 @@ function RedeemNonModal({
             !errors[FormModel.formFields.phone.name];
 
           return (
-            <Form>
+            <Form
+              placeholder={undefined}
+              onPointerEnterCapture={undefined}
+              onPointerLeaveCapture={undefined}
+            >
               {currentStep === ActiveStep.STEPS_OVERVIEW ? (
                 <StepsOverview
+                  showBosonLogoInFooter={showBosonLogoInFooter}
                   onNextClick={() => {
                     if (selectedExchange) {
                       setExchange(selectedExchange);
@@ -563,6 +390,7 @@ function RedeemNonModal({
                 />
               ) : currentStep === ActiveStep.MY_ITEMS ? (
                 <MyItems
+                  showBosonLogoInFooter={showBosonLogoInFooter}
                   sellerIds={sellerIds}
                   exchangeState={exchangeState}
                   onExchangeCardClick={(exchange) => {
@@ -593,16 +421,13 @@ function RedeemNonModal({
                 />
               ) : currentStep === ActiveStep.EXCHANGE_VIEW ? (
                 <ExchangeView
+                  showBosonLogoInFooter={showBosonLogoInFooter}
                   onHouseClick={() => setActiveStep(ActiveStep.MY_ITEMS)}
                   onNextClick={() => setActiveStep(ActiveStep.REDEEM_FORM)}
                   onExchangePolicyClick={(...args) => {
                     setActiveStep(ActiveStep.EXCHANGE_POLICY);
                     onExchangePolicyClick?.(...args);
                   }}
-                  onPurchaseOverview={() => {
-                    setActiveStep(ActiveStep.PURCHASE_OVERVIEW);
-                    exchangeViewOnPurchaseOverview?.();
-                  }}
                   onViewFullDescription={() => {
                     setActiveStep(ActiveStep.EXCHANGE_FULL_DESCRIPTION);
                     exchangeViewOnViewFullDescription?.();
@@ -615,14 +440,11 @@ function RedeemNonModal({
                     setActiveStep(ActiveStep.EXPIRE_VOUCHER_VIEW);
                     exchangeViewOnExpireVoucherClick?.();
                   }}
-                  isValid={isRedeemFormOK}
                   exchangeId={exchange?.id || selectedExchange?.id || ""}
                   onRaiseDisputeClick={() => {
                     handleRaiseDispute(exchange?.id);
                     exchangeViewOnRaiseDisputeClick?.();
                   }}
-                  fairExchangePolicyRules={fairExchangePolicyRules}
-                  defaultDisputeResolverId={defaultDisputeResolverId}
                   loadingViewFullDescription={loadingViewFullDescription}
                   onGetDetailViewProviderProps={onGetDetailViewProviderProps}
                   onContractualAgreementClick={onContractualAgreementClick}
@@ -632,6 +454,7 @@ function RedeemNonModal({
                 providerPropsRef.current ? (
                 <DetailViewProvider {...providerPropsRef.current}>
                   <ExchangeFullDescriptionView
+                    showBosonLogoInFooter={showBosonLogoInFooter}
                     onBackClick={goToPreviousStep}
                     exchange={exchange || selectedExchange || null}
                     onExchangePolicyClick={(...args) => {
@@ -642,6 +465,7 @@ function RedeemNonModal({
                 </DetailViewProvider>
               ) : currentStep === ActiveStep.EXPIRE_VOUCHER_VIEW ? (
                 <ExpireVoucherView
+                  showBosonLogoInFooter={showBosonLogoInFooter}
                   onBackClick={goToPreviousStep}
                   exchange={exchange}
                   onSuccess={(...args) => {
@@ -651,6 +475,7 @@ function RedeemNonModal({
                 />
               ) : currentStep === ActiveStep.CANCELLATION_VIEW ? (
                 <CancellationView
+                  showBosonLogoInFooter={showBosonLogoInFooter}
                   onBackClick={goToPreviousStep}
                   exchange={exchange || selectedExchange || null}
                   onSuccess={(...args) => {
@@ -661,10 +486,9 @@ function RedeemNonModal({
                     cancellationViewOnSuccess?.(...args);
                   }}
                 />
-              ) : currentStep === ActiveStep.PURCHASE_OVERVIEW ? (
-                <PurchaseOverviewView onBackClick={goToPreviousStep} />
               ) : currentStep === ActiveStep.REDEEM_FORM ? (
                 <RedeemFormView
+                  showBosonLogoInFooter={showBosonLogoInFooter}
                   onBackClick={goToPreviousStep}
                   exchange={exchange || selectedExchange || null}
                   onNextClick={() =>
@@ -682,6 +506,7 @@ function RedeemNonModal({
                 />
               ) : currentStep === ActiveStep.EXCHANGE_POLICY ? (
                 <RedeemOfferPolicyView
+                  showBosonLogoInFooter={showBosonLogoInFooter}
                   offer={exchange?.offer}
                   onBackClick={goToPreviousStep}
                   onContractualAgreementClick={onContractualAgreementClick}
@@ -693,9 +518,11 @@ function RedeemNonModal({
                 <ContractualAgreementView
                   exchange={exchange}
                   onBackClick={goToPreviousStep}
+                  showBosonLogoInFooter={showBosonLogoInFooter}
                 />
               ) : currentStep === ActiveStep.LICENSE_AGREEMENT ? (
                 <LicenseAgreementView
+                  showBosonLogoInFooter={showBosonLogoInFooter}
                   offer={exchange?.offer}
                   onBackClick={goToPreviousStep}
                 />
@@ -711,6 +538,7 @@ function RedeemNonModal({
                 />
               ) : currentStep === ActiveStep.REDEEM_SUCESS ? (
                 <RedeemSuccess
+                  showBosonLogoInFooter={showBosonLogoInFooter}
                   onHouseClick={() => setActiveStep(ActiveStep.MY_ITEMS)}
                   onClickDone={() => setActiveStep(ActiveStep.MY_ITEMS)}
                   exchangeId={exchange?.id || ""}

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

@@ -0,0 +1,128 @@
+import * as Sentry from "@sentry/browser";
+import React from "react";
+import { subgraph } from "@bosonprotocol/core-sdk";
+import { ethers } from "ethers";
+import styled from "styled-components";
+import { isTruthy } from "../../../../types/helpers";
+const UlWithWordBreak = styled.ul`
+  * > {
+    word-break: break-word;
+  }
+`;
+export const checkSignatures = ({
+  doFetchSellersFromSellerIds,
+  parentOrigin,
+  sellerIds,
+  signatures,
+  sellersFromSellerIds,
+  areSignaturesMandatory
+}: {
+  parentOrigin?: string | null;
+  sellerIds?: string[];
+  signatures?: string[] | undefined | null;
+  doFetchSellersFromSellerIds: boolean;
+  sellersFromSellerIds:
+    | (subgraph.SellerFieldsFragment & {
+        lensOwner?: string | null | undefined;
+      })[]
+    | undefined;
+  areSignaturesMandatory: boolean;
+}) => {
+  try {
+    if (areSignaturesMandatory && !sellerIds) {
+      return (
+        <p>
+          SellerIds must be defined as these are defined postDeliveryInfoUrl,
+          deliveryInfoHandler, redemptionSubmittedHandler,
+          redemptionConfirmedHandler{" "}
+        </p>
+      );
+    }
+    if (
+      sellerIds?.length &&
+      areSignaturesMandatory &&
+      (!signatures || signatures?.filter(isTruthy).length !== sellerIds.length)
+    ) {
+      return (
+        <p>
+          Please provide a list of signatures of the message{" "}
+          {JSON.stringify({ origin: "<parentWindowOrigin>" })} for each seller
+          in sellerIds list
+        </p>
+      );
+    }
+    if (
+      doFetchSellersFromSellerIds &&
+      (!sellersFromSellerIds ||
+        sellersFromSellerIds.length !== sellerIds?.length)
+    ) {
+      return (
+        <p>
+          Could not retrieve sellers from the specified sellerIds{" "}
+          {sellerIds?.join(",")}
+        </p>
+      );
+    }
+    const originMessage = JSON.stringify({ origin: parentOrigin });
+    const firstIndexSignatureThatDoesntMatch = sellersFromSellerIds?.findIndex(
+      ({ assistant }, index) => {
+        if (!signatures?.[index]) {
+          return true;
+        }
+        const signerAddr = ethers.utils
+          .verifyMessage(originMessage, signatures[index])
+          .toLowerCase();
+
+        if (signerAddr.toLowerCase() !== assistant.toLowerCase()) {
+          return true;
+        }
+        return false;
+      }
+    );
+    if (
+      firstIndexSignatureThatDoesntMatch !== undefined &&
+      firstIndexSignatureThatDoesntMatch !== -1 &&
+      sellersFromSellerIds &&
+      signatures
+    ) {
+      return (
+        <div>
+          <p>Signature does not match.</p>
+          <UlWithWordBreak>
+            <li>Signatures: {signatures}</li>
+            <li>
+              Seller assistant address is{" "}
+              {sellersFromSellerIds[
+                firstIndexSignatureThatDoesntMatch
+              ]?.assistant?.toLowerCase()}
+            </li>
+            <li>
+              Address that signed the message:{" "}
+              {signatures
+                ? ethers.utils
+                    .verifyMessage(
+                      originMessage,
+                      signatures[firstIndexSignatureThatDoesntMatch]
+                    )
+                    .toLowerCase()
+                : "(no signatures)"}
+            </li>
+            <li>
+              Received signature for this seller:{" "}
+              {signatures?.[firstIndexSignatureThatDoesntMatch]}
+            </li>
+            <li>Message used to verify signature: {originMessage}</li>
+          </UlWithWordBreak>
+        </div>
+      );
+    }
+  } catch (error) {
+    console.error(error);
+    Sentry.captureException(error);
+    return (
+      <p>
+        Something went wrong: {error instanceof Error && <b>{error.message}</b>}
+      </p>
+    );
+  }
+};

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

@@ -1,3 +1,7 @@
+import * as Yup from "yup";
+import { FormModel } from "./RedeemFormModel";
+import { ethers } from "ethers";
+
 export enum ProfileType {
   LENS = "lens",
   REGULAR = "regular"
@@ -7,3 +11,51 @@ export enum ContactPreference {
   XMTP = "xmtp",
   XMTP_AND_EMAIL = "xmtp_and_email"
 }
+
+export const getRedeemFormValidationSchema = ({
+  emailPreference,
+  requestBuyerAddress
+}: {
+  emailPreference: boolean;
+  requestBuyerAddress: boolean;
+}) => {
+  return Yup.object({
+    [FormModel.formFields.name.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.name.requiredErrorMessage),
+    [FormModel.formFields.streetNameAndNumber.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.streetNameAndNumber.requiredErrorMessage),
+    [FormModel.formFields.city.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.city.requiredErrorMessage),
+    [FormModel.formFields.state.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.state.requiredErrorMessage),
+    [FormModel.formFields.zip.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.zip.requiredErrorMessage),
+    [FormModel.formFields.country.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.country.requiredErrorMessage),
+    [FormModel.formFields.email.name]: emailPreference
+      ? Yup.string()
+          .trim()
+          .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)
+  });
+};