@bosonprotocol/react-kit 0.34.0-alpha.2 → 0.34.0-alpha.20

package/src/components/productCard/ProductCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode, useState } from "react";
 import {
   Currencies,
   CurrencyDisplay
@@ -6,23 +6,20 @@ import {
 import { IBaseImage, Image } from "../image/Image";
 import { Tooltip, TooltipProps } from "../tooltip/Tooltip";
 import {
-  BottomText,
   ProductCardBottom,
   ProductCardBottomContent,
-  ProductCardCreator,
-  ProductCardCreatorAvatar,
   TopLeftRibbon,
   ProductCardCreatorName,
-  ProductCardData,
   ProductCardImageWrapper,
-  ProductCardPrice,
-  ProductCardPriceWrapper,
   ProductCardTitle,
   ProductCardTitleWrapper,
-  ProductCardWrapper
+  ProductCardWrapper,
+  CTAOnHoverContainer
 } from "./ProductCard.styles";
 
 import { ProductType } from "./const";
+import { Grid } from "../ui/Grid";
+
 interface IProductCard {
   asterisk?: boolean;
   avatar: string;
@@ -36,12 +33,15 @@ interface IProductCard {
   isHoverDisabled?: boolean;
   onAvatarNameClick?: () => void;
   onCardClick?: (id: string | number) => void;
-  price: number;
+  price: string;
   productId: string;
   productType?: ProductType;
   title: string;
   tooltip?: string;
   tooltipProps?: Omit<TooltipProps, "content">;
+  CTAOnHover?: ReactNode;
+  hideCreatorName?: boolean;
+  isImageFitCover?: boolean;
 }
 
 const Wrapper = ({
@@ -62,85 +62,83 @@ const Wrapper = ({
   }
   return <>{children}</>;
 };
+
 export const PhygitalLabel = ({ ...rest }) => {
   return <TopLeftRibbon {...rest} data-text="Phygital" />;
 };
+
 export const ProductCard = (props: IProductCard) => {
   const {
-    asterisk = false,
-    avatar,
-    onAvatarError,
     avatarName,
-    bottomText,
     currency,
     dataCard = "product-card",
     dataTestId = "offer",
     imageProps,
     isHoverDisabled = false,
-    onAvatarNameClick,
     onCardClick,
     price,
     productId,
     title,
     tooltip = "",
     tooltipProps = {},
-    productType
+    CTAOnHover,
+    hideCreatorName = false,
+    isImageFitCover = false
   } = props;
-  const isPhygital = productType === ProductType.phygital;
+
+  const [isHovered, setIsHovered] = useState(false);
+
   return (
     <ProductCardWrapper
       data-card={dataCard}
       $isHoverDisabled={isHoverDisabled}
       data-testid={dataTestId}
+      $isImageFitCover={isImageFitCover}
       onClick={(e) => {
         e.preventDefault();
         onCardClick?.(productId);
       }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
       <ProductCardImageWrapper>
-        {isPhygital && <PhygitalLabel />}
         <Image {...imageProps} />
       </ProductCardImageWrapper>
+      {CTAOnHover && (
+        <CTAOnHoverContainer $isHovered={isHovered}>
+          {CTAOnHover}
+        </CTAOnHoverContainer>
+      )}
       <ProductCardBottom>
-        <div>
-          <ProductCardBottomContent>
-            <ProductCardData>
-              <ProductCardCreator
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onAvatarNameClick?.();
-                }}
-              >
-                <ProductCardCreatorAvatar>
-                  <img src={avatar} alt="avatar" onError={onAvatarError} />
-                </ProductCardCreatorAvatar>
-                <ProductCardCreatorName data-avatarname="product-card">
-                  {avatarName}
-                </ProductCardCreatorName>
-              </ProductCardCreator>
-            </ProductCardData>
-            <ProductCardPriceWrapper>
-              <Wrapper tooltip={tooltip} tooltipProps={tooltipProps}>
-                <>
-                  <ProductCardPrice>Price {asterisk && "*"}</ProductCardPrice>
-                  <CurrencyDisplay
-                    value={price}
-                    currency={currency}
-                    style={{
-                      wordBreak: "break-all",
-                      alignItems: "flex-start",
-                      justifyContent: "flex-end"
-                    }}
-                  />
-                </>
-              </Wrapper>
-            </ProductCardPriceWrapper>
-          </ProductCardBottomContent>
-          <ProductCardTitleWrapper>
-            <ProductCardTitle>{title}</ProductCardTitle>
-          </ProductCardTitleWrapper>
-        </div>
-        {bottomText && <BottomText>{bottomText}</BottomText>}
+        <ProductCardBottomContent>
+          <Grid flexDirection="column">
+            <ProductCardTitleWrapper>
+              <ProductCardTitle fontSize={"0.75rem"} fontWeight={"600"}>
+                {title}
+              </ProductCardTitle>
+            </ProductCardTitleWrapper>
+            {!hideCreatorName && (
+              <ProductCardCreatorName data-avatarname="product-card">
+                {avatarName}
+              </ProductCardCreatorName>
+            )}
+          </Grid>
+          <Wrapper tooltip={tooltip} tooltipProps={tooltipProps}>
+            <CurrencyDisplay
+              value={price}
+              currency={currency}
+              fontSize={"0.875rem"}
+              iconSize={16}
+              gap={"0.3125rem"}
+              style={{
+                wordBreak: "break-all",
+                alignItems: "center",
+                justifyContent: "center",
+                paddingTop: "0.25rem"
+              }}
+            />
+          </Wrapper>
+        </ProductCardBottomContent>
       </ProductCardBottom>
     </ProductCardWrapper>
   );

package/src/components/productCard/commonStyles.ts

@@ -5,7 +5,6 @@ export const cardWrapperStyles = css`
   padding: 0px;
   isolation: isolate;
   width: 100%;
-  min-height: 31.25rem;
   box-shadow: 0px 4.31783px 107.946px rgba(21, 30, 52, 0.1);
   background: ${theme.colors.light.white};
 `;

package/src/components/queryClient/withQueryClientProvider.tsx

@@ -1,30 +1,5 @@
-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>
-  );
-};
+import { QueryClientProviderCustom } from "./QueryClientProviderCustom";
 
 export const withQueryClientProvider = <P extends object>(
   WrappedComponent: React.ComponentType<P>

package/src/components/skeleton/CollectionsCardSkeleton.tsx

@@ -3,27 +3,45 @@ import styled from "styled-components";
 import { theme } from "../../theme";
 import { cardWrapperStyles } from "../productCard/commonStyles";
 import { LoadingBubble } from "./common";
-
+import { Grid } from "../ui/Grid";
+const colors = theme.colors.light;
 const Container = styled.div`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: repeat(2, min-content);
+  display: flex;
+  flex-direction: column;
   ${cardWrapperStyles}
+  /* REMs gives bad height here on smaller views */
+  height: 279px;
+  min-width: 265px;
 `;
 
 const ImagesContainer = styled.div`
   width: 100%;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  grid-column-gap: 1px;
-  grid-row-gap: 1px;
+  position: relative;
+  /* REMs gives bad height here on smaller views */
+  height: 208px;
+  background-color: ${colors.lightGrey};
 `;
 
 const BottomCard = styled.div`
-  padding: 1rem 1.5rem 1rem 1.5rem;
+  padding: 1rem 1.5rem 1rem 0.3125rem;
 `;
 
+const ImageOne = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 10%;
+  transform: translateY(-50%);
+`;
+const ImageTwo = styled.div`
+  position: absolute;
+  right: 10%;
+  top: 5%;
+`;
+const ImageThree = styled.div`
+  position: absolute;
+  right: 10%;
+  bottom: 5%;
+`;
 type SkeletonCardProps = ButtonHTMLAttributes<HTMLDivElement> & {
   withBottomText?: boolean;
 };
@@ -31,36 +49,42 @@ export const CollectionsCardSkeleton = (props: SkeletonCardProps) => {
   return (
     <Container>
       <ImagesContainer>
-        <LoadingBubble
-          $width="100%"
-          $height="170px"
-          $borderRadius="0px"
-          $backgroundColor={theme.colors.light.darkGrey}
-        />
-        <LoadingBubble
-          $width="100%"
-          $height="170px"
-          $borderRadius="0px"
-          $backgroundColor={theme.colors.light.darkGrey}
-        />
-        <LoadingBubble
-          $width="100%"
-          $height="170px"
-          $borderRadius="0px"
-          $backgroundColor={theme.colors.light.darkGrey}
-        />
-        <LoadingBubble
-          $width="100%"
-          $height="170px"
-          $borderRadius="0px"
-          $backgroundColor={theme.colors.light.darkGrey}
-        />
+        <ImageOne>
+          <LoadingBubble
+            $width="140px"
+            $height="102px"
+            $borderRadius="0px"
+            $backgroundColor={theme.colors.light.darkGrey}
+          />
+        </ImageOne>
+        <ImageTwo>
+          <LoadingBubble
+            $width="60px"
+            $height="50px"
+            $borderRadius="0px"
+            $backgroundColor={theme.colors.light.darkGrey}
+          />
+        </ImageTwo>
+        <ImageThree>
+          <LoadingBubble
+            $width="60px"
+            $height="50px"
+            $borderRadius="0px"
+            $backgroundColor={theme.colors.light.darkGrey}
+          />
+        </ImageThree>
       </ImagesContainer>
-      <BottomCard>
-        <LoadingBubble $width="50%" $height="26px" $margin="0 0 8.75px 0" />
-        <LoadingBubble $width="52px" $height="18px" $margin="0 0 4.375px 0" />
-        <LoadingBubble $width="30px" $height="30px" />
-      </BottomCard>
+      <Grid
+        justifyContent="flex-start"
+        align-items="center"
+        marginLeft={"1.5rem"}
+      >
+        <LoadingBubble $width="43px" $height="43px" $borderRadius={"100%"} />
+        <BottomCard>
+          <LoadingBubble $width="52px" $height="18px" $margin="0 0 4.375px 0" />
+          <LoadingBubble $width="30px" $height="25px" />
+        </BottomCard>
+      </Grid>
     </Container>
   );
 };

package/src/components/skeleton/ProductCardSkeleton.tsx

@@ -2,72 +2,59 @@ import React, { ButtonHTMLAttributes } from "react";
 import {
   BottomText,
   ProductCardBottom,
-  ProductCardBottomContent,
-  ProductCardCreator,
-  ProductCardCreatorAvatar,
-  ProductCardCreatorName,
-  ProductCardData,
   ProductCardImageWrapper,
-  ProductCardPrice,
-  ProductCardPriceWrapper,
   ProductCardTitle,
   ProductCardTitleWrapper,
   ProductCardWrapper
 } from "../productCard/ProductCard.styles";
-import { Grid } from "../ui/Grid";
 import { theme } from "../../theme";
 import { LoadingBubble } from "./common";
+import styled from "styled-components";
 
 type SkeletonCardProps = ButtonHTMLAttributes<HTMLDivElement> & {
   withBottomText?: boolean;
 };
+
+const ProductCardImageWrapperStyled = styled(ProductCardImageWrapper)`
+  overflow: hidden;
+  width: 100%;
+  /* REMs gives bad height here on smaller views */
+  max-height: 210px;
+  min-height: 11.25rem;
+`;
+
+const ProductCardTitleWrapperStyled = styled(ProductCardTitleWrapper)`
+  margin-bottom: 5px;
+`;
 export const ProductCardSkeleton = (props: SkeletonCardProps) => {
   const { withBottomText } = props;
 
   return (
     <ProductCardWrapper {...props} $isHoverDisabled={true}>
-      <ProductCardImageWrapper>
+      <ProductCardImageWrapperStyled>
         <LoadingBubble
           $width="100%"
           $height="340px"
           $borderRadius="0px"
           $backgroundColor={theme.colors.light.darkGrey}
         />
-      </ProductCardImageWrapper>
+      </ProductCardImageWrapperStyled>
       <ProductCardBottom>
         <div>
-          <ProductCardBottomContent>
-            <ProductCardData>
-              <ProductCardCreator>
-                <ProductCardCreatorAvatar>
-                  <LoadingBubble $width="16px" $height="16px" />
-                </ProductCardCreatorAvatar>
-                <ProductCardCreatorName data-avatarname="product-card">
-                  <LoadingBubble $width="50px" $height="12.5px" />
-                </ProductCardCreatorName>
-              </ProductCardCreator>
-            </ProductCardData>
-            <ProductCardPriceWrapper>
-              <ProductCardPrice>
-                <Grid justifyContent="flex-end">
-                  <LoadingBubble $width="30px" $height="10px" />
-                </Grid>
-              </ProductCardPrice>
-              <Grid justifyContent="flex-end" gap="8px">
-                <LoadingBubble $width="24px" $height="24px" />
-                <LoadingBubble $width="calc(100% - 24px - 8px)" />
-              </Grid>
-            </ProductCardPriceWrapper>
-          </ProductCardBottomContent>
-          <ProductCardTitleWrapper>
+          <ProductCardTitleWrapperStyled>
+            <ProductCardTitle>
+              <LoadingBubble $width="50%" $height="12px" />
+            </ProductCardTitle>
+          </ProductCardTitleWrapperStyled>
+          <ProductCardTitleWrapperStyled>
             <ProductCardTitle>
-              <LoadingBubble $width="100%" $height="30px" />
+              <LoadingBubble $width="20%" $height="8px" />
             </ProductCardTitle>
-          </ProductCardTitleWrapper>
+          </ProductCardTitleWrapperStyled>
         </div>
         {withBottomText && (
           <BottomText>
-            <LoadingBubble $width="100%" $height="15.5px" />
+            <LoadingBubble $width="15%" $height="13px" />
           </BottomText>
         )}
       </ProductCardBottom>

package/src/components/wallet2/accountDrawer/AuthenticatedHeader.tsx

@@ -9,13 +9,12 @@ import {
 } from "phosphor-react";
 import React, { useCallback, useState } from "react";
 import styled, { CSSProperties } from "styled-components";
-
 import { Typography } from "../../ui/Typography";
 import StatusIcon from "../identicon/StatusIcon";
 import { FiatLink, useFiatLinkContext } from "./fiatOnrampModal/FiatLink";
 // import FiatOnrampModal from "./fiatOnrampModal";
 import { IconWithConfirmTextButton } from "./IconButton";
-import MiniPortfolio from "./miniPortfolio";
+import MiniPortfolio, { MiniPortfolioProps } from "./miniPortfolio";
 import { Column } from "../../ui/column";
 import { theme } from "../../../theme";
 import { useENSName } from "../../../hooks/ens/useENSName";
@@ -131,8 +130,7 @@ export function PortfolioArrow({
     <ArrowUpRight size={20} {...rest} />
   );
 }
-export type AuthenticatedHeaderProps = {
-  account: string;
+export type AuthenticatedHeaderProps = MiniPortfolioProps & {
   onUserDisconnect?: () => unknown;
   disconnectColor: CSSProperties["color"];
   disconnectBackgroundColor: CSSProperties["backgroundColor"];
@@ -145,7 +143,8 @@ export function AuthenticatedHeader({
   disconnectColor,
   disconnectBackgroundColor,
   disconnectBorderRadius,
-  buyCryptoTheme
+  buyCryptoTheme,
+  defaultTokens
 }: AuthenticatedHeaderProps) {
   const { connector } = useWeb3React();
   const { ENSName } = useENSName(account);
@@ -292,7 +291,7 @@ export function AuthenticatedHeader({
             </Tooltip>
           </FiatOnrampNotAvailableText>
         )}
-        <MiniPortfolio account={account} />
+        <MiniPortfolio account={account} defaultTokens={defaultTokens} />
       </PortfolioDrawerContainer>
     </AuthenticatedHeaderWrapper>
   );

package/src/components/wallet2/accountDrawer/miniPortfolio/index.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { Grid } from "../../../ui/Grid";
 import { Typography } from "../../../ui/Typography";
-import Tokens from "./tokens";
+import Tokens, { TokensProps } from "./tokens";
 import { breakpointNumbers } from "../../../../lib/ui/breakpoint";
 import { Column } from "../../../ui/column";
 
@@ -41,7 +41,7 @@ const PageWrapper = styled.div`
 interface Page {
   title: React.ReactNode;
   key: string;
-  component: ({ account }: { account: string }) => JSX.Element;
+  component: ({ account }: MiniPortfolioProps) => JSX.Element;
 }
 
 const Pages: Array<Page> = [
@@ -52,7 +52,11 @@ const Pages: Array<Page> = [
   }
 ];
 
-export default function MiniPortfolio({ account }: { account: string }) {
+export type MiniPortfolioProps = TokensProps;
+export default function MiniPortfolio({
+  account,
+  defaultTokens
+}: MiniPortfolioProps) {
   const [currentPage, setCurrentPage] = useState(0);
 
   const { component: Page } = Pages[currentPage];
@@ -72,7 +76,7 @@ export default function MiniPortfolio({ account }: { account: string }) {
         })}
       </Nav>
       <PageWrapper data-testid="mini-portfolio-page">
-        <Page account={account} />
+        <Page account={account} defaultTokens={defaultTokens} />
       </PageWrapper>
     </Wrapper>
   );

package/src/components/wallet2/accountDrawer/miniPortfolio/tokens/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Token as TokenType } from "@bosonprotocol/common";
 import { Token } from "@uniswap/sdk-core";
 import { ethers } from "ethers";
 import styled from "styled-components";
@@ -20,11 +21,16 @@ import {
 import { nativeOnChain } from "../../../../../lib/const/tokens";
 import { PortfolioLogo } from "../../../../logo/PortfolioLogo";
 
-export default function Tokens({ account }: { account: string }) {
+export type TokensProps = {
+  account: string;
+  defaultTokens?: TokenType[];
+};
+export default function Tokens({ account, defaultTokens }: TokensProps) {
   const chainId = useChainId();
   const { data: tokenBalances, isLoading } = useTokenBalances({
     address: account,
-    chainId
+    chainId,
+    tokens: defaultTokens
   });
 
   if (!chainId || isLoading) {

package/src/components/wallet2/selector/ChainSelector.tsx

@@ -28,10 +28,13 @@ import {
   UniWalletSupportedChains,
   getChainPriority
 } from "../../../lib/const/chains";
-import { useConfigContext } from "../../config/ConfigContext";
-import { getEnvConfigsFilteredByEnv } from "../../../lib/config/getConfigsByChainId";
+import { getEnvConfigsFilteredByEnv as importedGetEnvConfigsFilteredByEnv } from "../../../lib/config/getConfigsByChainId";
 import { useSelectChain } from "../../../hooks/connection/useSelectChain";
-import { ConfigId, ProtocolConfig } from "@bosonprotocol/core-sdk";
+import {
+  ConfigId,
+  EnvironmentType,
+  CoreProtocolConfig
+} from "@bosonprotocol/core-sdk";
 import { SvgImage } from "../../ui/SvgImage";
 
 const IconAndChevron = styled.div<{
@@ -57,11 +60,6 @@ const IconAndChevron = styled.div<{
   }
 `;
 
-export interface ChainSelectorProps {
-  leftAlign?: boolean;
-  backgroundColor: CSSProperties["backgroundColor"];
-}
-
 function useWalletSupportedChains({
   NETWORK_SELECTOR_CHAINS_IDS
 }: {
@@ -88,14 +86,25 @@ const chevronProps = {
   height: 20,
   width: 20
 };
+
+export interface ChainSelectorProps {
+  leftAlign?: boolean;
+  backgroundColor: CSSProperties["backgroundColor"];
+  config: CoreProtocolConfig;
+  getEnvConfigsFilteredByEnv?: (
+    envName: EnvironmentType
+  ) => CoreProtocolConfig[];
+}
+
 export const ChainSelector = ({
   leftAlign,
-  backgroundColor
+  backgroundColor,
+  config,
+  getEnvConfigsFilteredByEnv = importedGetEnvConfigsFilteredByEnv
 }: ChainSelectorProps) => {
-  const { config } = useConfigContext();
   const NETWORK_SELECTOR_CHAINS = useMemo(
     () => getEnvConfigsFilteredByEnv(config.envName),
-    [config.envName]
+    [config.envName, getEnvConfigsFilteredByEnv]
   );
   const NETWORK_SELECTOR_CHAINS_IDS = NETWORK_SELECTOR_CHAINS.map(
     (config) => config.chainId as ChainId
@@ -128,7 +137,10 @@ export const ChainSelector = ({
           }
           return acc;
         },
-        { supported: [], unsupported: [] } as Record<string, ProtocolConfig[]>
+        { supported: [], unsupported: [] } as Record<
+          string,
+          CoreProtocolConfig[]
+        >
       );
     return [supported, unsupported];
   }, [NETWORK_SELECTOR_CHAINS, walletSupportsChain]);
@@ -148,7 +160,7 @@ export const ChainSelector = ({
 
   const [pendingConfigId, setPendingConfigId] = useState<ConfigId>();
   const onSelectChain = useCallback(
-    async (config: ProtocolConfig) => {
+    async (config: CoreProtocolConfig) => {
       try {
         setPendingConfigId(config.configId);
         await selectChain(config.configId);