@bosonprotocol/react-kit 0.29.0-alpha.2 → 0.29.0-alpha.21

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

@@ -121,9 +121,9 @@ function CommitNonModal({
     setStep((prev) => {
       const { previousStep } = prev;
       const currentStep = previousStep.length
-        ? (previousStep.pop() as CommitStep)
+        ? (previousStep[previousStep.length - 1] as CommitStep)
         : prev.currentStep;
-      const previousWithoutLast = previousStep;
+      const previousWithoutLast = previousStep.slice(0, -1);
       return {
         previousStep: previousWithoutLast,
         currentStep: currentStep

package/src/components/modal/components/Commit/DetailView/ExternalCommitDetailView.tsx

@@ -8,12 +8,15 @@ import {
   CommitDetailViewWithProviderProps
 } from "./CommitDetailViewWithProvider";
 import { ResetStylesForNonWidgets } from "../../../../styles/ResetStylesForNonWidgets";
+export {
+  CommitWidgetReduxProvider,
+  CommitWidgetReduxUpdaters
+} from "../../../../widgets/commit/CommitWidgetProviders";
 
 export type ExternalCommitDetailViewProps =
   CommitDetailViewWithProviderProps & {
     providerProps: Omit<CommitWidgetProvidersProps, "children">;
   };
-
 export const ExternalCommitDetailView: React.FC<
   ExternalCommitDetailViewProps
 > = (props) => {

package/src/components/modal/components/PurchaseOverview/PurchaseOverview.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode, useCallback } from "react";
+import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
+import NonModal from "../../nonModal/NonModal";
+import { BosonFooter } from "../common/BosonFooter";
+import { theme } from "../../../../theme";
+import { CSSProperties } from "styled-components";
+const colors = theme.colors.light;
+
+export type PurchaseOverviewProps = {
+  lookAndFeel: "regular" | "modal";
+  hideModal: () => void;
+  modalMargin?: CSSProperties["margin"];
+};
+
+export const PurchaseOverview: React.FC<PurchaseOverviewProps> = ({
+  lookAndFeel,
+  hideModal,
+  modalMargin
+}) => {
+  const Wrapper = useCallback(
+    ({ children }: { children: ReactNode }) => {
+      return lookAndFeel === "regular" ? (
+        <>{children}</>
+      ) : (
+        <div style={{ margin: modalMargin }}>{children}</div>
+      );
+    },
+    [lookAndFeel, modalMargin]
+  );
+  return (
+    <Wrapper>
+      <NonModal
+        hideModal={hideModal}
+        footerComponent={<BosonFooter />}
+        contentStyle={{
+          background: colors.white
+        }}
+        lookAndFeel={lookAndFeel}
+        showConnectButton={false}
+      >
+        <PurchaseOverviewView />
+      </NonModal>
+    </Wrapper>
+  );
+};

package/src/components/modal/components/SellerFinance/FinanceDeposit.tsx

@@ -15,7 +15,10 @@ import {
   extractUserFriendlyError,
   getHasUserRejectedTx
 } from "../../../../lib/errors/transactions";
-import { getNumberWithoutDecimals } from "../../../../lib/numbers/numbers";
+import {
+  getNumberWithDecimals,
+  getNumberWithoutDecimals
+} from "../../../../lib/numbers/numbers";
 import { poll } from "../../../../lib/promises/promises";
 import { DepositFundsButton } from "../../../cta/funds/DepositFundsButton";
 import { useEnvContext } from "../../../environment/EnvironmentContext";
@@ -75,6 +78,9 @@ export default function FinanceDeposit({
 
   const tokenStep = 10 ** -Number(tokenDecimals);
   const step = 0.01;
+  const balanceWithDecimals = dataBalance
+    ? getNumberWithDecimals(dataBalance.toString(), tokenDecimals)
+    : Number.MAX_SAFE_INTEGER;
 
   const handleChangeDepositAmount = (
     e: React.ChangeEvent<HTMLInputElement>
@@ -84,7 +90,7 @@ export default function FinanceDeposit({
     const value = e.target.valueAsNumber || 0;
     setIsDepositInvalid(false);
     setDepositError(null);
-    if (value < tokenStep || value > Number.MAX_SAFE_INTEGER) {
+    if (value < tokenStep || value > balanceWithDecimals) {
       setIsDepositInvalid(true);
     }
     setAmountToDeposit(valueStr);

package/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx

@@ -97,12 +97,16 @@ export default function FinanceWithdraw({
     const value = e.target.valueAsNumber || 0;
     setIsWithdrawInvalid(false);
 
-    const availableFundsBig = getNumberWithDecimals(
-      availableAmount,
-      tokenDecimals
-    );
+    try {
+      const availableFundsBig = getNumberWithDecimals(
+        availableAmount,
+        tokenDecimals
+      );
 
-    if (value < tokenStep || value > availableFundsBig || !value) {
+      if (value < tokenStep || value > availableFundsBig || !value) {
+        setIsWithdrawInvalid(true);
+      }
+    } catch (e) {
       setIsWithdrawInvalid(true);
     }
 

package/src/components/modal/components/common/StepsOverview/PurchaseOverview.tsx

@@ -35,9 +35,9 @@ const CommitStepWrapper = styled.div`
 const COMMIT_STEPS = [
   {
     icon: ShoppingCart,
-    header: "Commit",
+    header: "Commit to Buy",
     description:
-      "Commit to an Offer to receive a Redeemable NFT (rNFT) that can be exchanged for the real-world item it represents"
+      "Commit to buy an offer to receive a Redeemable NFT (rNFT) that can be exchanged for the real-world item it represents"
   },
   {
     icon: CurrencyCircleDollar,
@@ -63,9 +63,9 @@ export default function PurchaseOverview() {
           <b>How does the purchase process work?</b>
         </Typography>
         <Typography tag="p">
-          When Committing, the item price will be transferred into escrow and
-          you will receive a redeemable NFT (rNFT) that can be exchanged for the
-          real-world item it represents.
+          When Committing to Buy, the item price will be transferred into escrow
+          and you will receive a redeemable NFT (rNFT) that can be exchanged for
+          the real-world item it represents.
         </Typography>
       </Grid>
       <CommitStepWrapper>

package/src/components/modal/components/common/StepsOverview/PurchaseOverviewView.tsx

@@ -7,7 +7,7 @@ import { Grid } from "../../../../ui/Grid";
 
 const colors = theme.colors.light;
 type Props = {
-  onBackClick: () => void;
+  onBackClick?: () => void;
 };
 export function PurchaseOverviewView({ onBackClick }: Props) {
   const dispatch = useNonModalContext();
@@ -16,11 +16,15 @@ export function PurchaseOverviewView({ onBackClick }: Props) {
       payload: {
         headerComponent: (
           <Grid style={{ flex: "1" }}>
-            <ArrowLeft
-              onClick={onBackClick}
-              size={32}
-              style={{ cursor: "pointer" }}
-            />
+            {onBackClick && (
+              <ArrowLeft
+                onClick={() => {
+                  onBackClick();
+                }}
+                size={32}
+                style={{ cursor: "pointer" }}
+              />
+            )}
           </Grid>
         ),
         contentStyle: {
@@ -28,7 +32,6 @@ export function PurchaseOverviewView({ onBackClick }: Props) {
         }
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch]);
+  }, [dispatch, onBackClick]);
   return <PurchaseOverview />;
 }

package/src/components/modal/components/common/detail/DetailSlider.tsx

@@ -294,6 +294,7 @@ export default function DetailSlider({
                       style={{ cursor: "pointer" }}
                       dataTestId="offerAnimationUrl"
                       videoProps={{ muted: true, loop: true, autoPlay: true }}
+                      withMuteButton
                     />
                   )}
                 </>

package/src/components/modal/nonModal/Header.tsx

@@ -9,6 +9,7 @@ import { useBreakpoints } from "../../../hooks/useBreakpoints";
 
 const colors = theme.colors.light;
 const Wrapper = styled.div<{ $flexWrap: string }>`
+  box-sizing: border-box;
   container-type: inline-size;
   position: relative;
   width: 100%;

package/src/components/queryClient/QueryClientProviderCustom.tsx

@@ -0,0 +1,27 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryClientProviderProps
+} from "react-query";
+
+import React from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+});
+
+type QueryClientProviderCustomProps = Partial<QueryClientProviderProps>;
+
+export const QueryClientProviderCustom: React.FC<
+  QueryClientProviderCustomProps
+> = ({ ...props }) => {
+  return (
+    <QueryClientProvider client={queryClient} {...props}>
+      {props.children}
+    </QueryClientProvider>
+  );
+};

package/src/components/queryClient/withQueryClientProvider.tsx

@@ -0,0 +1,50 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryClientProviderProps
+} from "react-query";
+
+import React from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+});
+
+type QueryClientProviderCustomProps = Partial<QueryClientProviderProps>;
+
+export const QueryClientProviderCustom: React.FC<
+  QueryClientProviderCustomProps
+> = ({ ...props }) => {
+  return (
+    <QueryClientProvider client={queryClient} {...props}>
+      {props.children}
+    </QueryClientProvider>
+  );
+};
+
+export const withQueryClientProvider = <P extends object>(
+  WrappedComponent: React.ComponentType<P>
+) => {
+  // Define the props type for the wrapped component
+  type Props = P;
+
+  // Return a new component
+  const WithQueryClientProvider: React.FC<Props> = (props) => {
+    return (
+      <QueryClientProviderCustom>
+        <WrappedComponent {...props} />
+      </QueryClientProviderCustom>
+    );
+  };
+
+  // Set display name for debugging purposes
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || "Component";
+  WithQueryClientProvider.displayName = `withQueryClientProviderCustom(${displayName})`;
+
+  return WithQueryClientProvider;
+};

package/src/components/styles/GlobalStyle.tsx

@@ -117,7 +117,6 @@ const GlobalStyle = createGlobalStyle<
     margin: 0;
     padding: 0;
 
-    background-color: var(--primaryBgColor);
     color: var(--textColor);
 
     font-family: ${(props) => props.$fontFamily || "Plus Jakarta Sans"};

package/src/components/ui/MuteButton.tsx

@@ -0,0 +1,31 @@
+import { SpeakerSimpleHigh, SpeakerSimpleSlash } from "phosphor-react";
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.button`
+  > svg {
+    filter: drop-shadow(1px 1px 0px white);
+  }
+`;
+
+type MuteButtonProps = {
+  muted: boolean;
+  onClick: () => void;
+  className?: string;
+};
+
+export const MuteButton: React.FC<MuteButtonProps> = ({
+  muted,
+  onClick,
+  className
+}) => {
+  return (
+    <Wrapper onClick={onClick} className={className}>
+      {muted ? (
+        <SpeakerSimpleSlash size={20} />
+      ) : (
+        <SpeakerSimpleHigh size={20} />
+      )}
+    </Wrapper>
+  );
+};

package/src/components/ui/ThemedButton.tsx

@@ -207,7 +207,7 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     outline: {
       color: colors.black,
       borderColor: colors.border,
-      borderWidth: 1,
+      borderWidth: 2,
       hover: {
         background: colors.border,
         color: "var(--accent)"
@@ -222,7 +222,6 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blank: {
       color: `${colors.black}4d`,
-      padding: "0.75rem 0.5rem",
       hover: {
         color: colors.black
       },
@@ -233,7 +232,6 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blankSecondary: {
       color: "var(--accent)",
-      padding: "0.75rem 0.5rem",
       hover: {
         borderColor: colors.secondary,
         background: colors.border,
@@ -242,7 +240,7 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blankSecondaryOutline: {
       color: "var(--accent)",
-      borderWidth: 1,
+      borderWidth: 2,
       borderColor: colors.secondary,
       hover: {
         borderColor: colors.secondary,
@@ -252,8 +250,7 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blankOutline: {
       color: colors.black,
-      padding: "1rem 2rem",
-      borderWidth: 1,
+      borderWidth: 2,
       hover: {
         borderColor: colors.secondary,
         background: colors.border,
@@ -263,14 +260,23 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     white: {
       color: colors.black,
       background: colors.white,
-      padding: "1rem",
-      borderWidth: 1,
+      borderWidth: 2,
       borderColor: colors.border,
       hover: {
         color: colors.white,
         background: colors.black
       }
     },
+    black: {
+      color: colors.white,
+      background: colors.black,
+      borderWidth: 2,
+      borderColor: colors.black,
+      hover: {
+        color: colors.black,
+        background: colors.white
+      }
+    },
     warning: {
       color: colors.black,
       borderColor: colors.orange,

package/src/components/ui/Video.tsx

@@ -1,11 +1,13 @@
-import { VideoCamera as VideoIcon, VideoCameraSlash } from "phosphor-react";
+import { VideoCameraSlash, VideoCamera as VideoIcon } from "phosphor-react";
 import React, {
+  ElementRef,
   ReactElement,
   ReactNode,
+  VideoHTMLAttributes,
   useEffect,
   useMemo,
-  useState,
-  VideoHTMLAttributes
+  useRef,
+  useState
 } from "react";
 import styled, { css } from "styled-components";
 import { useIpfsStorage } from "../../hooks/useIpfsStorage";
@@ -13,10 +15,16 @@ import { fetchIpfsBase64Media } from "../../lib/base64/base64";
 import { theme } from "../../theme";
 import { Loading } from "../Loading";
 
-import { buttonText } from "./styles";
+import { MuteButton } from "./MuteButton";
 import { Typography } from "./Typography";
+import { buttonText } from "./styles";
 import { zIndex } from "./zIndex";
 const colors = theme.colors.light;
+const StyledMuteButton = styled(MuteButton)`
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+`;
 const VideoWrapper = styled.div<{ $hasOnClick?: boolean }>`
   overflow: hidden;
   position: relative;
@@ -88,6 +96,7 @@ interface IVideo {
   showPlaceholderText?: boolean;
   noPreload?: boolean;
   videoProps?: VideoHTMLAttributes<HTMLElement>;
+  withMuteButton?: boolean;
   componentWhileLoading?: () => ReactElement;
 }
 const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
@@ -97,6 +106,7 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
   showPlaceholderText = true,
   noPreload = false,
   videoProps,
+  withMuteButton,
   componentWhileLoading: ComponentWhileLoading,
   ...rest
 }) => {
@@ -157,7 +167,22 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
     }
     return videoSrc || "";
   }, [videoSrc]);
-
+  const videoRef = useRef<ElementRef<"video">>(null);
+  const [muted, setMuted] = useState<boolean>(!!videoProps?.muted);
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.defaultMuted = muted;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoRef.current?.defaultMuted]);
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.autoplay = false;
+      videoRef.current.pause();
+      videoRef.current.muted = muted;
+      videoRef.current.play();
+    }
+  }, [muted]);
   if (!isLoaded && !isError) {
     if (ComponentWhileLoading) {
       return <ComponentWhileLoading />;
@@ -198,11 +223,20 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
     >
       {children || ""}
       {videoSrc && (
-        <VideoHtml
-          data-testid={dataTestId}
-          {...videoProps}
-          src={mp4Src || ""}
-        />
+        <>
+          {withMuteButton && (
+            <StyledMuteButton
+              muted={muted}
+              onClick={() => setMuted((prev) => !prev)}
+            />
+          )}
+          <VideoHtml
+            ref={videoRef}
+            data-testid={dataTestId}
+            {...videoProps}
+            src={mp4Src || ""}
+          />
+        </>
       )}
     </VideoWrapper>
   );

package/src/components/ui/styles.ts

@@ -14,7 +14,7 @@ export const button = css`
   align-items: center;
   padding: 1rem 1.5px;
   gap: 0.5rem;
-  margin: 1px;
+  margin: 0;
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 0px #000000;

package/src/components/widgets/commit/CommitWidget.tsx

@@ -8,6 +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;
@@ -31,7 +32,8 @@ type CommitProps = {
     lookAndFeel: "regular" | "modal";
     modalMargin?: CSSProperties["margin"];
   };
-export type CommitWidgetProps = CommitProps & CommitWidgetProvidersProps;
+export type CommitWidgetProps = CommitProps &
+  Omit<CommitWidgetProvidersProps, "withReduxProvider" | "provider">;
 export function CommitWidget(props: CommitWidgetProps) {
   const Container = useCallback(
     ({ children }: { children: ReactNode }) => {
@@ -45,9 +47,10 @@ export function CommitWidget(props: CommitWidgetProps) {
     // @ts-ignore
     [props.lookAndFeel, props.modalMargin]
   );
+
   return (
     <Container>
-      <CommitWidgetProviders {...props}>
+      <CommitWidgetProviders {...props} withReduxProvider>
         <GlobalStyle />
         <CommitModalWithOffer {...props} hideModal={props.closeWidgetClick} />
       </CommitWidgetProviders>