@bosonprotocol/react-kit 0.34.0-alpha.8 → 0.34.0

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/ui/Video.tsx

@@ -198,7 +198,7 @@ export const Video: React.FC<VideoProps> = ({
       return <ComponentWhileLoading />;
     }
     return (
-      <VideoWrapper {...rest}>
+      <VideoWrapper {...rest} className="video-container">
         <VideoPlaceholder $position="static">
           <Typography tag="div">
             <Loading />

package/src/components/ui/styles.ts

@@ -5,6 +5,14 @@ export const transition = css`
   transition: all 150ms ease-in-out;
 `;
 
+export const buttonText = css`
+  letter-spacing: 0.5px;
+  font-style: normal;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 24px;
+`;
+
 export const button = css`
   box-sizing: border-box;
   cursor: pointer;
@@ -18,7 +26,7 @@ export const button = css`
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 0px #000000;
-
+  ${buttonText}
   ${transition}
   svg {
     ${transition}
@@ -47,51 +55,34 @@ export const text = css`
   line-height: 24px;
 `;
 
-export const buttonText = css`
-  letter-spacing: 0.5px;
-  font-style: normal;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 24px;
-`;
-
 export const small = css`
   min-height: 2.125rem;
   padding: 0.5rem 1rem;
-  > * {
-    font-size: 0.75rem !important;
-  }
-  #buttonText {
+  * {
     font-size: 0.75rem;
   }
 `;
 export const regular = css`
   min-height: 2.813rem;
   padding: 0.75rem 1.5rem;
-  > * {
-    font-size: 1rem !important;
+  * {
+    font-size: 1rem;
   }
   ${breakpoint.xxs} {
-    > * {
-      font-size: 0.875rem !important;
+    * {
+      font-size: 0.875rem;
     }
   }
-  #buttonText {
-    font-size: 0.875rem;
-  }
 `;
 export const large = css`
   min-height: 3.5rem;
   padding: 1rem 2rem;
-  > * {
-    font-size: 1.125rem !important;
+  * {
+    font-size: 1.125rem;
   }
   ${breakpoint.xxs} {
-    > * {
-      font-size: 1rem !important;
+    * {
+      font-size: 1rem;
     }
   }
-  #buttonText {
-    font-size: 1rem;
-  }
 `;

package/src/components/wallet/ConnectButton.tsx

@@ -10,7 +10,7 @@ import ThemedButton, { bosonButtonThemes } from "../ui/ThemedButton";
 import { useBreakpoints } from "../../hooks/useBreakpoints";
 import { saveItemInStorage } from "../../hooks/storage/useBosonLocalStorage";
 import { SignOut, Wallet } from "phosphor-react";
-import { useIsMagicLoggedIn } from "../../hooks";
+import { useConfigContext, useIsMagicLoggedIn } from "../../hooks";
 import { useAccount, useChainId } from "../../hooks/connection/connection";
 import { useDisconnect } from "../../hooks/connection/useDisconnect";
 import { MagicLoginButton } from "../magicLink/Login";
@@ -79,6 +79,7 @@ export default function ConnectButton({
   showChangeWallet,
   ...rest
 }: Props) {
+  const { withMagicLink } = useConfigContext();
   const { isLteXS, isLteS } = useBreakpoints();
   const isSideBar = ["left", "right"].includes(navigationBarPosition);
   const buttonPadding = isSideBar ? "0.75rem 1rem" : "";
@@ -120,14 +121,16 @@ export default function ConnectButton({
 
                       return (
                         <>
-                          <MagicLoginButton
-                            buttonProps={{
-                              size: isLteXS ? "small" : "regular",
-                              theme: bosonButtonThemes({
-                                withBosonStyle: false
-                              })["primary"]
-                            }}
-                          />
+                          {withMagicLink && (
+                            <MagicLoginButton
+                              buttonProps={{
+                                size: isLteXS ? "small" : "regular",
+                                theme: bosonButtonThemes({
+                                  withBosonStyle: false
+                                })["primary"]
+                              }}
+                            />
+                          )}
                           <Button
                             onClick={() => {
                               saveItemInStorage(

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/IconButton.tsx

@@ -112,19 +112,19 @@ const IconBlock = forwardRef<
     borderRadius: CSSProperties["borderRadius"];
   }
 >(function IconBlock(props, ref) {
-  const { color, backgroundColor, borderRadius } = props;
   if ("href" in props) {
+    const { color, backgroundColor, borderRadius, ...restProps } = props;
     return (
       <IconBlockLink
         ref={ref as React.ForwardedRef<HTMLAnchorElement>}
         $color={color}
         $backgroundColor={backgroundColor}
         $borderRadius={borderRadius}
-        {...props}
+        {...restProps}
       />
     );
   }
-
+  const { color, backgroundColor, borderRadius, ...restProps } = props;
   return (
     <IconBlockButton
       // ignoring 'button' 'type' conflict between React and styled-components
@@ -134,7 +134,7 @@ const IconBlock = forwardRef<
       $color={color}
       $backgroundColor={backgroundColor}
       $borderRadius={borderRadius}
-      {...props}
+      {...restProps}
     />
   );
 });

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/walletModal/ConnectionErrorView.tsx

@@ -5,12 +5,13 @@ import styled from "styled-components";
 import { Typography } from "../../ui/Typography";
 import { useCloseAccountDrawer } from "../accountDrawer";
 import { flexColumnNoWrap } from "../styles";
-import { Button } from "../../buttons/Button";
 import {
   ActivationStatus,
   useActivationState
 } from "../../connection/activate";
 import { theme } from "../../../theme";
+import { Grid } from "../../ui/Grid";
+import { BaseButton, BaseButtonProps } from "../../buttons/BaseButton";
 const colors = theme.colors.light;
 const Wrapper = styled.div`
   ${flexColumnNoWrap};
@@ -27,8 +28,15 @@ const AlertTriangleIcon = styled(Warning)`
   color: ${colors.red};
 `;
 
+export type ConnectionErrorViewProps = {
+  tryAgainTheme: BaseButtonProps["theme"];
+  backToWalletSelectionTheme: BaseButtonProps["theme"];
+};
 // TODO(cartcrom): move this to a top level modal, rather than inline in the drawer
-export default function ConnectionErrorView() {
+export default function ConnectionErrorView({
+  tryAgainTheme,
+  backToWalletSelectionTheme
+}: ConnectionErrorViewProps) {
   const { activationState, tryActivation, cancelActivation } =
     useActivationState();
   const closeDrawer = useCloseAccountDrawer();
@@ -50,10 +58,17 @@ export default function ConnectionErrorView() {
         The connection attempt failed. Please click try again and follow the
         steps to connect in your wallet.
       </Typography>
-      <Button onClick={retry}>Try Again</Button>
-      <Button onClick={cancelActivation}>
-        <Typography marginBottom={12}>Back to wallet selection</Typography>
-      </Button>
+      <Grid gap="1rem">
+        <BaseButton onClick={retry} theme={tryAgainTheme}>
+          Try Again
+        </BaseButton>
+        <BaseButton
+          onClick={cancelActivation}
+          theme={backToWalletSelectionTheme}
+        >
+          <Typography marginBottom={12}>Back to wallet selection</Typography>
+        </BaseButton>
+      </Grid>
     </Wrapper>
   );
 }

package/src/components/wallet2/walletModal/Option.tsx

@@ -110,6 +110,9 @@ export interface OptionProps {
   hoverColor: CSSProperties["color"];
   backgroundColor: CSSProperties["backgroundColor"];
   borderRadius: CSSProperties["borderRadius"];
+  onOptionClick?: (arg0: {
+    activationState: ReturnType<typeof useActivationState>["activationState"];
+  }) => void;
 }
 export function Option({
   connection,
@@ -117,7 +120,8 @@ export function Option({
   hoverFocusBackgroundColor,
   hoverColor,
   backgroundColor,
-  borderRadius
+  borderRadius,
+  onOptionClick
 }: OptionProps) {
   const { activationState, tryActivation } = useActivationState();
   const toggleAccountDrawer = useToggleAccountDrawer();
@@ -139,7 +143,10 @@ export function Option({
     >
       <OptionCardClickable
         disabled={isSomeOptionPending}
-        onClick={activate}
+        onClick={() => {
+          activate();
+          onOptionClick?.({ activationState });
+        }}
         selected={isCurrentOptionPending}
         data-testid={`wallet-option-${connection.type}`}
       >

package/src/components/wallet2/walletModal/index.tsx

@@ -5,7 +5,9 @@ import styled, { CSSProperties } from "styled-components";
 
 import { Grid } from "../../ui/Grid";
 import { flexColumnNoWrap } from "../styles";
-import ConnectionErrorView from "./ConnectionErrorView";
+import ConnectionErrorView, {
+  ConnectionErrorViewProps
+} from "./ConnectionErrorView";
 import { Option, OptionProps } from "./Option";
 import {
   ActivationStatus,
@@ -39,7 +41,6 @@ const OptionGrid = styled.div<{ $borderRadius: CSSProperties["borderRadius"] }>`
 
 export type WalletModalProps = {
   PrivacyPolicy: React.FC;
-  magicLoginButtonProps: MagicLoginButtonProps;
   optionProps: Pick<
     OptionProps,
     | "color"
@@ -47,12 +48,20 @@ export type WalletModalProps = {
     | "hoverColor"
     | "backgroundColor"
     | "borderRadius"
+    | "onOptionClick"
   > & { iconBorderRadius: CSSProperties["borderRadius"] };
-};
+  withMagicLogin?: boolean;
+  connectionErrorProps: ConnectionErrorViewProps;
+} & (
+  | { withMagicLogin: true; magicLoginButtonProps: MagicLoginButtonProps }
+  | { withMagicLogin?: false; magicLoginButtonProps?: undefined }
+);
 export function WalletModal({
   PrivacyPolicy,
   magicLoginButtonProps,
-  optionProps
+  optionProps,
+  withMagicLogin = true,
+  connectionErrorProps
 }: WalletModalProps) {
   const chainId = useChainId();
   const { config } = useConfigContext();
@@ -82,7 +91,7 @@ export function WalletModal({
         Connect a wallet
       </Grid>
       {activationState.status === ActivationStatus.ERROR ? (
-        <ConnectionErrorView />
+        <ConnectionErrorView {...connectionErrorProps} />
       ) : (
         <AutoColumn $gap="16px">
           <OptionGrid
@@ -100,7 +109,9 @@ export function WalletModal({
                 />
               ))}
           </OptionGrid>
-          <MagicLoginButton {...magicLoginButtonProps} />
+          {withMagicLogin && magicLoginButtonProps && (
+            <MagicLoginButton {...magicLoginButtonProps} />
+          )}
           <PrivacyPolicy />
         </AutoColumn>
       )}