wip

bosonprotocol · Jan 16, 2025 · 278878c · 278878c
1 parent 2d27a0c
commit 278878c
Show file tree

Hide file tree

Showing 20 changed files with 141 additions and 109 deletions.
diff --git a/.../components/modal/components/Commit/ContractualAgreementView/ContractualAgreementView.tsx b/.../components/modal/components/Commit/ContractualAgreementView/ContractualAgreementView.tsx
@@ -23,7 +23,7 @@ export function ContractualAgreementView({
   showBosonLogoInHeader
 }: Props) {
   const offerId = offer?.id;
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/...-kit/src/components/modal/components/Commit/LicenseAgreementView/LicenseAgreementView.tsx b/...-kit/src/components/modal/components/Commit/LicenseAgreementView/LicenseAgreementView.tsx
@@ -1,14 +1,9 @@
 import React, { useEffect } from "react";
-import { Grid } from "../../../../ui/Grid";
-import { Typography } from "../../../../ui/Typography";
 import { Exchange } from "../../../../../types/exchange";
 import License from "../../../../license/License";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { getCssVar } from "../../../../../theme";
-import {
-  defaultThemedBosonLogoProps,
-  ThemedBosonLogo
-} from "../../common/ThemedBosonLogo";
+import { HeaderView } from "../../../nonModal/headers/HeaderView";
 
 interface Props {
   onBackClick: () => void;
@@ -21,27 +16,16 @@ export function LicenseAgreementView({
   offer,
   showBosonLogoInHeader
 }: Props) {
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
         onArrowLeftClick: onBackClick,
         headerComponent: (
-          <Grid
-            gap="1rem"
-            justifyContent="space-between"
-            style={{ flex: "1 1" }}
-          >
-            <Typography tag="h3">License Agreement</Typography>
-            {showBosonLogoInHeader && (
-              <ThemedBosonLogo
-                gridProps={{
-                  ...defaultThemedBosonLogoProps.gridProps,
-                  flex: 1
-                }}
-              />
-            )}
-          </Grid>
+          <HeaderView
+            text={"License Agreement"}
+            showBosonLogoInHeader={showBosonLogoInHeader}
+          />
         ),
         contentStyle: {
           background: getCssVar("--background-accent-color")

diff --git a/.../components/modal/components/Commit/OfferFullDescriptionView/OfferFullDescriptionView.tsx b/.../components/modal/components/Commit/OfferFullDescriptionView/OfferFullDescriptionView.tsx
@@ -4,11 +4,11 @@ import { Offer } from "../../../../../types/offer";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { OfferFullDescription } from "../../common/OfferFullDescription/OfferFullDescription";
 import { Grid } from "../../../../ui/Grid";
-import { ArrowLeft } from "phosphor-react";
 import { Typography } from "../../../../ui/Typography";
 import { OnClickBuyOrSwapHandler } from "../../common/detail/types";
 import { UseGetOfferDetailDataProps } from "../../common/detail/useGetOfferDetailData";
 import { ThemedBosonLogo } from "../../common/ThemedBosonLogo";
+import { HeaderView } from "../../../nonModal/headers/HeaderView";
 
 type Props = OnClickBuyOrSwapHandler & {
   onBackClick: () => void;
@@ -23,28 +23,30 @@ export function OfferFullDescriptionView({
   onClickBuyOrSwap,
   showBosonLogoInHeader
 }: Props) {
-  const dispatch = useNonModalContext();
+  const { dispatch, showConnectButton } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
         onArrowLeftClick: onBackClick,
         headerComponent: (
-          <Grid
-            gap="1rem"
-            style={{ flex: "1 1" }}
-            justifyContent="space-between"
-          >
-            <Typography tag="h3">{offer.metadata?.name || ""}</Typography>
-            {showBosonLogoInHeader && <ThemedBosonLogo />}
-          </Grid>
+          <HeaderView
+            text={offer.metadata?.name || ""}
+            showBosonLogoInHeader={showBosonLogoInHeader}
+          />
         ),
         contentStyle: {
           background: getCssVar("--background-accent-color"),
           padding: 0
         }
       }
     });
-  }, [dispatch, offer.metadata?.name, onBackClick, showBosonLogoInHeader]);
+  }, [
+    dispatch,
+    offer.metadata?.name,
+    onBackClick,
+    showBosonLogoInHeader,
+    showConnectButton
+  ]);
   return (
     <OfferFullDescription
       includeOverviewTab

diff --git a/...eact-kit/src/components/modal/components/Commit/OfferPolicyView/CommitOfferPolicyView.tsx b/...eact-kit/src/components/modal/components/Commit/OfferPolicyView/CommitOfferPolicyView.tsx
@@ -27,25 +27,36 @@ export function CommitOfferPolicyView({
   showBosonLogoInHeader
 }: Props) {
   const offerName = offer?.metadata?.name || "";
-  const dispatch = useNonModalContext();
+  const { dispatch, showConnectButton } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
         onArrowLeftClick: onBackClick,
         headerComponent: (
-          <Grid gap="1rem" style={{ flex: "1" }} justifyContent="space-between">
-            <Typography tag="h3" style={{ flex: "1 1" }} margin={0}>
-              {offerName}
-            </Typography>
-            {showBosonLogoInHeader && <ThemedBosonLogo />}
-          </Grid>
+          <>
+            <Typography tag="h3">{offer?.metadata?.name || ""}</Typography>
+            <Grid
+              gap="1rem"
+              style={{ flex: "1 1" }}
+              justifyContent={showConnectButton ? "center" : "flex-end"}
+            >
+              {showBosonLogoInHeader && <ThemedBosonLogo />}
+            </Grid>
+          </>
         ),
         contentStyle: {
           background: getCssVar("--background-accent-color")
         }
       }
     });
-  }, [dispatch, offerName, onBackClick, showBosonLogoInHeader]);
+  }, [
+    dispatch,
+    offer?.metadata?.name,
+    offerName,
+    onBackClick,
+    showBosonLogoInHeader,
+    showConnectButton
+  ]);
   return (
     <>
       {offer ? (

diff --git a/packages/react-kit/src/components/modal/components/Commit/OfferVariantView.tsx b/packages/react-kit/src/components/modal/components/Commit/OfferVariantView.tsx
@@ -28,7 +28,7 @@ import { PhygitalLabel } from "../../../productCard/ProductCard";
 import { useIsPhygital } from "../../../../hooks/offer/useIsPhygital";
 import { getCssVar } from "../../../../theme";
 import { InnerCommitDetailViewProps } from "./DetailView/InnerCommitDetailView";
-import { ThemedBosonLogo } from "../common/ThemedBosonLogo";
+import { HeaderView } from "../../nonModal/headers/HeaderView";
 
 const ImageWrapper = styled.div`
   container-type: inline-size;
@@ -111,22 +111,28 @@ export function OfferVariantView({
     );
   }, [offerImg, images]);
 
-  const dispatch = useNonModalContext();
+  const { dispatch, showConnectButton } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
         onArrowLeftClick: null,
         headerComponent: (
-          <Grid gap="1rem" style={{ flex: "1 1" }} justifyContent="flex-end">
-            {showBosonLogoInHeader && <ThemedBosonLogo />}
-          </Grid>
+          <HeaderView
+            text={offer.metadata?.name || ""}
+            showBosonLogoInHeader={showBosonLogoInHeader}
+          />
         ),
         contentStyle: {
           background: getCssVar("--background-accent-color")
         }
       }
     });
-  }, [dispatch, showBosonLogoInHeader]);
+  }, [
+    dispatch,
+    offer.metadata?.name,
+    showBosonLogoInHeader,
+    showConnectButton
+  ]);
   const hasVariations = !!selectedVariant.variations?.length;
   const innerOnGetProviderProps = useCallback(
     (providerProps: DetailContextProps) => {
@@ -215,9 +221,6 @@ export function OfferVariantView({
           justifyContent="flex-start"
           alignItems="flex-start"
         >
-          <Typography tag="h3" marginTop="0" marginBottom="1rem">
-            {offer.metadata?.name || ""}
-          </Typography>
           {hasVariations && (
             <ResponsiveVariationSelects
               selectedVariant={selectedVariant}

diff --git a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
@@ -31,7 +31,7 @@ export function ConfirmationView({
   const sellerAddress = exchange?.seller?.assistant
     ? getAddress(exchange.seller.assistant)
     : "";
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   const { address } = useAccount();
   useEffect(() => {
     dispatch({

diff --git a/.../components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx b/.../components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx
@@ -20,7 +20,7 @@ export function ContractualAgreementView({
 }: Props) {
   const offer = exchange?.offer;
   const offerId = offer?.id;
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/...omponents/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx b/...omponents/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx
@@ -25,7 +25,7 @@ export function ExchangeFullDescriptionView({
   onClickBuyOrSwap,
   showBosonLogoInFooter
 }: Props) {
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx
@@ -122,7 +122,7 @@ export function ExchangeView({
     );
   }, [offerImg, images]);
 
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx
@@ -57,7 +57,7 @@ export function RedeemSuccess({
   const offer = exchange?.offer;
 
   const offerDetails = offer ? getOfferDetails(offer) : undefined;
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/...kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx b/...kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx
@@ -26,7 +26,7 @@ export const CancellationView: React.FC<CancellationViewProps> = ({
   showBosonLogoInFooter
 }) => {
   const { address } = useAccount();
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   const { widgetAction } = useRedemptionWidgetContext();
   const isCancelModeOnly = widgetAction === RedemptionWidgetAction.CANCEL_FORM;
   useEffect(() => {

diff --git a/...t/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx b/...t/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx
@@ -20,7 +20,7 @@ export const ExpireVoucherView: React.FC<ExpireVoucherViewProps> = ({
   onSuccess,
   showBosonLogoInFooter
 }) => {
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/...-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx b/...-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx
@@ -18,7 +18,7 @@ export function LicenseAgreementView({
   offer,
   showBosonLogoInFooter
 }: Props) {
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx b/packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx
@@ -42,7 +42,7 @@ export function MyItems({
     wallet: address
   });
   const buyerId = buyers?.[0]?.id;
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/...eact-kit/src/components/modal/components/Redeem/OfferPolicyView/RedeemOfferPolicyView.tsx b/...eact-kit/src/components/modal/components/Redeem/OfferPolicyView/RedeemOfferPolicyView.tsx
@@ -26,7 +26,7 @@ export function RedeemOfferPolicyView({
   showBosonLogoInFooter
 }: Props) {
   const offerName = offer?.metadata?.name || "";
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx b/packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx
@@ -25,7 +25,7 @@ export default function RedeemFormView({
   showBosonLogoInFooter
 }: Props) {
   const { address } = useAccount();
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/packages/react-kit/src/components/modal/components/common/StepsOverview/StepsOverview.tsx b/packages/react-kit/src/components/modal/components/common/StepsOverview/StepsOverview.tsx
@@ -50,7 +50,7 @@ export default function StepsOverview({
   onNextClick,
   showBosonLogoInFooter
 }: Props) {
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {

diff --git a/packages/react-kit/src/components/modal/nonModal/NonModal.tsx b/packages/react-kit/src/components/modal/nonModal/NonModal.tsx
@@ -170,9 +170,9 @@ const reducer = (state: State, action: Action): State => {
   };
 };
 
-const NonModalContext = createContext<React.Dispatch<Action> | undefined>(
-  undefined
-);
+const NonModalContext = createContext<
+  { dispatch: React.Dispatch<Action>; showConnectButton: boolean } | undefined
+>(undefined);
 export const useNonModalContext = () => {
   const context = useContext(NonModalContext);
   if (!context) {
@@ -256,27 +256,27 @@ export default function NonModal({
   }, [lookAndFeel]);
   return (
     <Container>
-      <Wrapper $size={size} $maxWidths={maxWidths}>
-        <Header
-          HeaderComponent={HeaderComponent}
-          withLeftArrowButton={!!withLeftArrowButton}
-          closable={closable}
-          handleOnCloseClick={handleOnCloseClick}
-          handleOnArrowLeftClick={handleOnArrowLeftClick}
-          showConnectButton={showConnectButton}
-        />
+      <NonModalContext.Provider value={{ dispatch, showConnectButton }}>
+        <Wrapper $size={size} $maxWidths={maxWidths}>
+          <Header
+            HeaderComponent={HeaderComponent}
+            withLeftArrowButton={
+              !!withLeftArrowButton || !!onArrowLeftClickFromReducer
+            }
+            closable={closable}
+            handleOnCloseClick={handleOnCloseClick}
+            handleOnArrowLeftClick={handleOnArrowLeftClick}
+            showConnectButton={showConnectButton}
+          />
 
-        <Content style={contentStyle}>
-          <NonModalContext.Provider value={dispatch}>
-            {children}
-          </NonModalContext.Provider>
-        </Content>
-        {FooterComponent ? (
-          <FooterWrapper>{FooterComponent}</FooterWrapper>
-        ) : (
-          <div style={{ width: "947px", maxWidth: "100vw" }} />
-        )}
-      </Wrapper>
+          <Content style={contentStyle}>{children}</Content>
+          {FooterComponent ? (
+            <FooterWrapper>{FooterComponent}</FooterWrapper>
+          ) : (
+            <div style={{ width: "947px", maxWidth: "100vw" }} />
+          )}
+        </Wrapper>
+      </NonModalContext.Provider>
     </Container>
   );
 }