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

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

@@ -5,7 +5,7 @@ import React, {
   createContext,
   useMemo
 } from "react";
-import { theme } from "../../../theme";
+import { colors, getCssVar } from "../../../theme";
 import { ReactNode } from "react";
 import styled, { css } from "styled-components";
 
@@ -15,7 +15,6 @@ import { zIndex } from "../../ui/zIndex";
 import { breakpoint } from "../../../lib/ui/breakpoint";
 import { Content } from "./styles";
 
-const colors = theme.colors.light;
 const Root = styled.div`
   position: relative;
   top: 0;
@@ -81,15 +80,8 @@ const sizeToMargin = {
   }
 } as const;
 
-const background = {
-  primaryBgColor: "var(--primaryBgColor)",
-  dark: `${colors.black}`,
-  light: `${colors.white}`
-} as const;
-
 const Wrapper = styled.div<{
   $size: NonModalProps["size"];
-  $themeVal: NonModalProps["theme"];
   $maxWidths: NonModalProps["maxWidths"];
 }>`
   display: flex;
@@ -97,18 +89,10 @@ const Wrapper = styled.div<{
   max-height: inherit;
   position: relative;
   z-index: ${zIndex.Modal};
-  color: ${({ $themeVal }) => {
-    switch ($themeVal) {
-      case "dark":
-        return colors.white;
-      default:
-        return colors.black;
-    }
-  }};
-  background-color: ${({ $themeVal }) => {
-    return background[$themeVal as keyof typeof background] || colors.white;
-  }};
-  border: var(--secondary);
+  color: ${getCssVar("--main-text-color")};
+  background-color: ${getCssVar("--background-accent-color")};
+  border-radius: ${getCssVar("--modal-border-radius")};
+  overflow: hidden;
   ${({ $maxWidths }) => {
     if (!$maxWidths) {
       return "";
@@ -170,12 +154,12 @@ export enum ActionKind {
 }
 
 type Action = {
-  payload: State;
+  payload: Required<State>;
 };
 
 type State = Pick<
   NonModalProps,
-  "headerComponent" | "contentStyle" | "footerComponent"
+  "headerComponent" | "contentStyle" | "footerComponent" | "onArrowLeftClick"
 >;
 
 const reducer = (state: State, action: Action): State => {
@@ -186,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) {
@@ -199,12 +183,13 @@ export const useNonModalContext = () => {
 
 export interface NonModalProps {
   hideModal?: (data?: unknown | undefined | null) => void;
+  onArrowLeftClick?: null | (() => unknown);
+  withLeftArrowButton?: boolean;
   headerComponent?: ReactNode;
   footerComponent?: ReactNode;
   contentStyle?: CSSProperties;
   size?: NonNullable<Store["modalSize"]>;
   maxWidths?: Store["modalMaxWidth"];
-  theme?: NonNullable<Store["theme"]>;
   closable?: boolean;
   lookAndFeel?: "modal" | "regular";
   children: ReactNode;
@@ -213,34 +198,45 @@ export interface NonModalProps {
 
 export default function NonModal({
   children,
+  withLeftArrowButton,
   hideModal,
+  onArrowLeftClick,
   headerComponent,
   footerComponent,
   size = "auto",
   maxWidths = null,
-  theme = "light",
   contentStyle: _contentStyle,
   closable = true,
   lookAndFeel = "modal",
   showConnectButton
 }: NonModalProps) {
-  const handleOnClose = () => {
+  const handleOnCloseClick = () => {
     if (closable && hideModal) {
       hideModal();
     }
   };
+
   const [
     {
       headerComponent: HeaderComponent,
       footerComponent: FooterComponent,
-      contentStyle
+      contentStyle,
+      onArrowLeftClick: onArrowLeftClickFromReducer
     },
     dispatch
   ] = useReducer(reducer, {
     headerComponent,
     footerComponent,
-    contentStyle: _contentStyle
+    contentStyle: _contentStyle,
+    onArrowLeftClick
   });
+  const handleOnArrowLeftClick = () => {
+    if (onArrowLeftClickFromReducer) {
+      onArrowLeftClickFromReducer();
+    } else {
+      handleOnCloseClick();
+    }
+  };
   const Container = useMemo(() => {
     return ({ children }: { children: ReactNode }) => {
       return lookAndFeel === "modal" ? (
@@ -248,7 +244,7 @@ export default function NonModal({
           {children}
           <RootBG
             onClick={() => {
-              handleOnClose();
+              handleOnCloseClick();
             }}
           />
         </Root>
@@ -260,21 +256,27 @@ export default function NonModal({
   }, [lookAndFeel]);
   return (
     <Container>
-      <Wrapper $size={size} $themeVal={theme} $maxWidths={maxWidths}>
-        <Header
-          HeaderComponent={HeaderComponent}
-          closable={closable}
-          handleOnClose={handleOnClose}
-          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>}
-      </Wrapper>
+          <Content style={contentStyle}>{children}</Content>
+          {FooterComponent ? (
+            <FooterWrapper>{FooterComponent}</FooterWrapper>
+          ) : (
+            <div style={{ width: "947px", maxWidth: "100vw" }} />
+          )}
+        </Wrapper>
+      </NonModalContext.Provider>
     </Container>
   );
 }

package/src/components/modal/nonModal/headers/HeaderView.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Typography } from "../../../ui/Typography";
+import { useNonModalContext } from "../NonModal";
+import { Grid } from "../../../ui/Grid";
+import { ThemedBosonLogo } from "../../components/common/ThemedBosonLogo";
+
+export type HeaderViewProps = {
+  text: string | undefined;
+  showBosonLogoInHeader: boolean;
+};
+export const HeaderView = ({
+  showBosonLogoInHeader,
+  text
+}: HeaderViewProps) => {
+  const { showConnectButton } = useNonModalContext();
+
+  return (
+    <>
+      <Typography tag="h3">{text}</Typography>
+      <Grid
+        gap="1rem"
+        style={{ flex: "1 1" }}
+        justifyContent={showConnectButton ? "center" : "flex-end"}
+      >
+        {showBosonLogoInHeader && <ThemedBosonLogo />}
+      </Grid>
+    </>
+  );
+};

package/src/components/offerPolicy/OfferPolicyDetails.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { theme } from "../../theme";
+import { colors, getCssVar } from "../../theme";
 import { Grid } from "../ui/Grid";
 import ThemedButton from "../ui/ThemedButton";
 import { Typography } from "../ui/Typography";
@@ -15,7 +15,6 @@ import useCheckExchangePolicy from "../../hooks/useCheckExchangePolicy";
 import { useConfigContext } from "../config/ConfigContext";
 import { useBosonContext } from "../boson/BosonProvider";
 
-const colors = theme.colors.light;
 const NoPaddingButton = styled(ThemedButton)`
   padding: 0 !important;
   border-color: transparent !important;
@@ -80,7 +79,7 @@ export default function OfferPolicyDetails({
         </>
       ),
       version: isExchangePolicyValid ? "v1" : "(Non-standard)",
-      color: isExchangePolicyValid ? undefined : colors.accent
+      color: isExchangePolicyValid ? undefined : colors.violet
     },
     rNFTLicense: {
       title: "License Agreement",
@@ -113,7 +112,7 @@ export default function OfferPolicyDetails({
         </Typography>
       )
     ) : (
-      <Typography tag="p" color={colors.accent} style={{ textAlign: "right" }}>
+      <Typography tag="p" color={colors.violet} style={{ textAlign: "right" }}>
         <CircleWavyQuestion size={20}></CircleWavyQuestion> Unknown
       </Typography>
     );
@@ -126,7 +125,7 @@ export default function OfferPolicyDetails({
       </Typography>
       <Typography
         fontSize="1.25rem"
-        color={colors.darkGrey}
+        color={getCssVar("--sub-text-color")}
         margin="0 0 2rem 0"
       >
         Boson Exchange Policies combine protocol variables and the underlying

package/src/components/pagination/PaginationPages.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 
 const Span = styled.span`
   font-size: 0.75rem;
-  color: ${theme.colors.light.darkGrey};
+  color: ${colors.greyDark};
   &:not(:last-of-type) {
     margin-right: 1rem;
   }

package/src/components/price/Price.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { useDisplayFloatWithConfig } from "../../lib/price/prices";
 import { breakpoint } from "../../lib/ui/breakpoint";
-import { theme } from "../../theme";
 import {
   Currencies,
   CurrencyDisplay
@@ -14,18 +13,12 @@ import { Typography } from "../ui/Typography";
 import ConvertedPrice from "./ConvertedPrice";
 
 import { useConvertedPrice } from "./useConvertedPrice";
-const colors = theme.colors.light;
-const Root = styled.div<{ $withBosonStyles: boolean }>`
+
+const Root = styled.div`
   display: flex;
   gap: 0.25rem;
   align-items: center;
   width: inherit;
-  ${({ $withBosonStyles }) =>
-    $withBosonStyles
-      ? css`
-          color: ${colors.black};
-        `
-      : ""}
   h3,
   h4 {
     padding-left: 2.5rem;
@@ -61,7 +54,6 @@ interface IProps {
   currencySymbol: string;
   convert?: boolean;
   isExchange?: boolean;
-  withBosonStyles?: boolean;
   tag?: keyof JSX.IntrinsicElements;
   withAsterisk?: boolean;
 }
@@ -73,7 +65,6 @@ export default function Price({
   convert = false,
   isExchange = false,
   tag = "h4",
-  withBosonStyles = false,
   withAsterisk,
   ...rest
 }: IProps) {
@@ -86,7 +77,7 @@ export default function Price({
   const displayFloat = useDisplayFloatWithConfig();
 
   return (
-    <Root {...rest} $withBosonStyles={withBosonStyles} data-testid="price">
+    <Root {...rest} data-testid="price">
       {price ? (
         <Grid
           alignItems="baseline"

package/src/components/productCard/ProductCard.styles.ts

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { theme } from "../../theme";
+import { colors, getCssVar } from "../../theme";
 import { cardWrapperStyles } from "./commonStyles";
 import { Typography } from "../ui/Typography";
 import { zIndex } from "../ui/zIndex";
@@ -10,49 +10,10 @@ export const ProductCardLabelWrapper = styled.div`
   left: 0.5rem;
   background: white;
   font-weight: 600;
-  color: ${({ theme }) => theme?.colors?.light.darkGrey};
+  color: ${colors.greyDark};
   z-index: 1;
 `;
 
-export const TopLeftRibbon = styled.div`
-  --d: 6px; /* folded part */
-  position: relative;
-  z-index: 1;
-  &:before {
-    content: attr(data-text);
-    font-size: var(--f);
-    font-weight: 600;
-    /* I : position & coloration */
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(0%, 125%) rotate(-45deg);
-    transform-origin: bottom left;
-    padding: 5px 35px calc(var(--d) + 5px);
-    color: ${({ theme }) => theme?.colors?.light.white};
-    background: linear-gradient(rgba(0, 0, 0, 0.5) 0 0) bottom/100% var(--d)
-      no-repeat ${({ theme }) => theme?.colors?.light.secondary};
-    /* II : clipping */
-    clip-path: polygon(
-      0 0,
-      100% 0,
-      100% 100%,
-      calc(100% - var(--d)) calc(100% - var(--d)),
-      var(--d) calc(100% - var(--d)),
-      0 100%
-    );
-    /* III : masking */
-    -webkit-mask:
-      linear-gradient(135deg, transparent calc(50% - var(--d) * 0.707), #fff 0)
-        bottom left,
-      linear-gradient(-135deg, transparent calc(50% - var(--d) * 0.707), #fff 0)
-        bottom right;
-    -webkit-mask-size: 300vmax 300vmax;
-    -webkit-mask-composite: destination-in;
-    mask-composite: intersect;
-  }
-`;
-
 export const ProductCardCreator = styled.div`
   display: flex;
   flex-direction: column;
@@ -76,7 +37,7 @@ export const ProductCardCreatorName = styled.div`
   font-weight: 600;
   font-size: 0.625rem;
   line-height: 150%;
-  color: ${({ theme }) => theme?.colors?.light.darkGrey};
+  color: ${colors.greyDark};
   flex: none;
   order: 1;
   flex-grow: 0;
@@ -85,14 +46,13 @@ export const ProductCardCreatorName = styled.div`
   > span {
     font-weight: 600;
     font-size: 0.625rem;
-    color: ${({ theme }) => theme?.colors?.light.darkGrey};
+    color: ${colors.greyDark};
   }
 `;
 
 export const ProductCardTitle = styled(Typography).attrs({
   className: "title"
 })`
-  color: ${({ theme }) => theme?.colors?.light.black};
   word-break: break-word;
   overflow: hidden;
   display: -webkit-box;
@@ -120,7 +80,7 @@ export const ProductCardPrice = styled.div`
   line-height: 150%;
   text-align: right;
   margin-bottom: 0.25rem;
-  color: ${({ theme }) => theme?.colors?.light.darkGrey};
+  color: ${colors.greyDark};
 `;
 
 export const ProductCardBottom = styled.div.attrs({ className: "bottom" })`
@@ -150,6 +110,7 @@ export const ProductCardTitleWrapper = styled.div`
 export const ProductCardWrapper = styled.div<{
   $isHoverDisabled: boolean;
   $isImageFitCover?: boolean;
+  $isClickable?: boolean;
 }>`
   ${cardWrapperStyles}
   overflow: hidden;
@@ -158,17 +119,44 @@ export const ProductCardWrapper = styled.div<{
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
-  cursor: pointer;
   min-height: 286px;
   height: 286px;
   padding: 0 1rem 1rem 1rem;
+  ${({ $isHoverDisabled }) =>
+    $isHoverDisabled
+      ? ""
+      : css`
+          transition: all 300ms ease-in-out;
+          &:hover {
+            border: 2px solid ${colors.border};
+
+            [data-image-wrapper] {
+              width: 110%;
+              img {
+                transform: scale(1.5);
+                object-position: center;
+                transition: all 300ms ease-in-out;
+              }
+            }
+          }
+        `}
+  ${({ $isClickable }) => {
+    if ($isClickable) {
+      return css`
+        cursor: pointer;
+      `;
+    }
+    return "";
+  }}
   [data-image-wrapper] {
     position: static;
     padding-top: 0;
     height: 100%;
+    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    border-radius: ${getCssVar("--modal-border-radius")};
     ${({ $isImageFitCover }) =>
       $isImageFitCover
         ? css`
@@ -179,24 +167,6 @@ export const ProductCardWrapper = styled.div<{
           `
         : ""}
   }
-  ${({ $isHoverDisabled }) =>
-    !$isHoverDisabled
-      ? css`
-          transition: all 300ms ease-in-out;
-          &:hover {
-            border: 2px solid ${theme.colors.light.border};
-
-            [data-image-wrapper] {
-              width: 110%;
-              img {
-                transform: scale(1.5);
-                object-position: center;
-                transition: all 300ms ease-in-out;
-              }
-            }
-          }
-        `
-      : ""}
 `;
 
 export const ProductCardTop = styled.div<{ $isNotImageLoaded: boolean }>`
@@ -214,7 +184,7 @@ export const BottomText = styled.p`
   line-height: 0.975rem;
   margin: 0;
   letter-spacing: 0.5px;
-  color: ${theme.colors.light.darkGrey};
+  color: ${colors.greyDark};
 `;
 
 export const ProductCardImageWrapper = styled.div`
@@ -232,9 +202,43 @@ export const ProductCardImageAndCTAContainer = styled.div`
   position: relative;
 `;
 
+const CTAstartState = css`
+  opacity: 0;
+  bottom: 30px;
+`;
+const CTAendState = css`
+  opacity: 1;
+  bottom: 70px;
+`;
 export const CTAOnHoverContainer = styled.div<{ $isHovered: boolean }>`
+  @keyframes appear {
+    from {
+      ${CTAstartState}
+    }
+    to {
+      ${CTAendState}
+    }
+  }
   position: absolute;
   z-index: ${zIndex.OfferCard};
-  bottom: ${({ $isHovered }) => ($isHovered ? "95px" : "1.875rem")};
-  transition: all 300ms ease-in-out;
+  ${CTAstartState}
+  ${({ $isHovered }) => {
+    if ($isHovered) {
+      return css`
+        animation: appear 300ms forwards;
+      `;
+    }
+    return "";
+  }};
+`;
+
+export const ProductTypeWrapper = styled.div`
+  background-color: ${colors.black};
+  color: ${colors.white};
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1563rem 0.25rem;
+  border-radius: ${getCssVar("--button-border-radius")};
+  margin-top: 0.5rem;
 `;

package/src/components/productCard/ProductCard.tsx

@@ -1,28 +1,39 @@
 import React, { ReactNode, useState } from "react";
 import {
   Currencies,
-  CurrencyDisplay
+  CurrencyDisplay,
+  CurrencyDisplayProps
 } from "../currencyDisplay/CurrencyDisplay";
 import { IBaseImage, Image } from "../image/Image";
 import { Tooltip, TooltipProps } from "../tooltip/Tooltip";
 import {
   ProductCardBottom,
   ProductCardBottomContent,
-  TopLeftRibbon,
   ProductCardCreatorName,
   ProductCardImageWrapper,
   ProductCardTitle,
   ProductCardTitleWrapper,
   ProductCardWrapper,
-  CTAOnHoverContainer
+  CTAOnHoverContainer,
+  ProductTypeWrapper
 } from "./ProductCard.styles";
 
 import { ProductType } from "./const";
 import { Grid } from "../ui/Grid";
+import { CircleHalf } from "phosphor-react";
+import { isMobile } from "../../lib/userAgent/userAgent";
 
-interface IProductCard {
+export const PhygitalLabel = () => {
+  return (
+    <ProductTypeWrapper>
+      <CircleHalf />
+      Phygital
+    </ProductTypeWrapper>
+  );
+};
+
+export interface IProductCard {
   asterisk?: boolean;
-  avatar: string;
   onAvatarError?: React.ReactEventHandler<HTMLImageElement> | undefined;
   avatarName: JSX.Element | string;
   bottomText?: string;
@@ -32,9 +43,8 @@ interface IProductCard {
   imageProps: IBaseImage;
   isHoverDisabled?: boolean;
   onAvatarNameClick?: () => void;
-  onCardClick?: (id: string | number) => void;
+  onCardClick?: () => void;
   price: string;
-  productId: string;
   productType?: ProductType;
   title: string;
   tooltip?: string;
@@ -42,6 +52,8 @@ interface IProductCard {
   CTAOnHover?: ReactNode;
   hideCreatorName?: boolean;
   isImageFitCover?: boolean;
+  className?: string;
+  currencyColor?: CurrencyDisplayProps["color"];
 }
 
 const Wrapper = ({
@@ -63,10 +75,6 @@ const Wrapper = ({
   return <>{children}</>;
 };
 
-export const PhygitalLabel = ({ ...rest }) => {
-  return <TopLeftRibbon {...rest} data-text="Phygital" />;
-};
-
 export const ProductCard = (props: IProductCard) => {
   const {
     avatarName,
@@ -77,13 +85,15 @@ export const ProductCard = (props: IProductCard) => {
     isHoverDisabled = false,
     onCardClick,
     price,
-    productId,
     title,
     tooltip = "",
     tooltipProps = {},
     CTAOnHover,
     hideCreatorName = false,
-    isImageFitCover = false
+    isImageFitCover = false,
+    className,
+    productType,
+    currencyColor
   } = props;
 
   const [isHovered, setIsHovered] = useState(false);
@@ -96,19 +106,22 @@ export const ProductCard = (props: IProductCard) => {
       $isImageFitCover={isImageFitCover}
       onClick={(e) => {
         e.preventDefault();
-        onCardClick?.(productId);
+        onCardClick?.();
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      className={className}
+      $isClickable={!!onCardClick}
     >
       <ProductCardImageWrapper>
         <Image {...imageProps} />
+        {CTAOnHover && !isMobile && (
+          <CTAOnHoverContainer $isHovered={isHovered}>
+            {CTAOnHover}
+          </CTAOnHoverContainer>
+        )}
       </ProductCardImageWrapper>
-      {CTAOnHover && (
-        <CTAOnHoverContainer $isHovered={isHovered}>
-          {CTAOnHover}
-        </CTAOnHoverContainer>
-      )}
+
       <ProductCardBottom>
         <ProductCardBottomContent>
           <Grid flexDirection="column">
@@ -128,6 +141,7 @@ export const ProductCard = (props: IProductCard) => {
               value={price}
               currency={currency}
               fontSize={"0.875rem"}
+              color={currencyColor}
               iconSize={16}
               gap={"0.3125rem"}
               style={{
@@ -138,6 +152,12 @@ export const ProductCard = (props: IProductCard) => {
               }}
             />
           </Wrapper>
+          {productType === ProductType.phygital && (
+            <ProductTypeWrapper>
+              <CircleHalf />
+              Phygital
+            </ProductTypeWrapper>
+          )}
         </ProductCardBottomContent>
       </ProductCardBottom>
     </ProductCardWrapper>