@bosonprotocol/react-kit 0.41.0 → 0.42.0-alpha.0

package/src/components/cta/offer/ReserveRangeButton.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import { BigNumberish, providers } from "ethers";
+import { TransactionResponse } from "@bosonprotocol/common";
+
+import { Button } from "../../buttons/Button";
+import { ButtonTextWrapper, ExtraInfo, LoadingWrapper } from "../common/styles";
+import { CtaButtonProps } from "../common/types";
+import { Loading } from "../../ui/loading/Loading";
+import { ButtonSize } from "../../ui/buttonSize";
+import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
+import { useMetaTx } from "../../../hooks/useMetaTx";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
+
+type Props = {
+  /**
+   * ID of offer to reserve range for.
+   */
+  offerId: BigNumberish;
+  /**
+   * Length of the range to reserve.
+   */
+  length: number;
+  /**
+   * To whom the range is being reserved: "seller" or "contract".
+   */
+  to: "seller" | "contract";
+} & CtaButtonProps<{
+  offerId: BigNumberish;
+  length: number;
+  to: "seller" | "contract";
+}>;
+
+export const ReserveRangeButton = withQueryClientProvider(
+  ({
+    offerId,
+    length,
+    to,
+    disabled = false,
+    showLoading = false,
+    extraInfo,
+    onSuccess,
+    onError,
+    onPendingSignature,
+    onPendingTransaction,
+    waitBlocks = 1,
+    size = ButtonSize.Large,
+    variant = "secondaryFill",
+    children,
+    coreSdkConfig,
+    ...rest
+  }: Props) => {
+    const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    const { isMetaTx } = useMetaTx(coreSdk);
+
+    return (
+      <Button
+        variant={variant}
+        disabled={disabled}
+        size={size}
+        onClick={async () => {
+          if (!isLoading) {
+            let txResponse: TransactionResponse | undefined = undefined;
+            try {
+              setIsLoading(true);
+              onPendingSignature?.();
+
+              if (isMetaTx) {
+                const nonce = Date.now();
+
+                const { r, s, v, functionName, functionSignature } =
+                  await coreSdk.signMetaTxReserveRange({
+                    offerId,
+                    length,
+                    to,
+                    nonce
+                  });
+
+                txResponse = await coreSdk.relayMetaTransaction({
+                  functionName,
+                  functionSignature,
+                  sigR: r,
+                  sigS: s,
+                  sigV: v,
+                  nonce
+                });
+              } else {
+                txResponse = await coreSdk.reserveRange(offerId, length, to);
+              }
+
+              onPendingTransaction?.(txResponse.hash, isMetaTx);
+              const receipt = await txResponse.wait(waitBlocks);
+
+              onSuccess?.(receipt as providers.TransactionReceipt, {
+                offerId,
+                length,
+                to
+              });
+            } catch (error) {
+              onError?.(error as Error, {
+                txResponse: txResponse as providers.TransactionResponse
+              });
+            } finally {
+              setIsLoading(false);
+            }
+          }
+        }}
+        {...rest}
+      >
+        <ButtonTextWrapper>
+          {children || "Reserve Range"}
+          {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
+            <ExtraInfo>{extraInfo}</ExtraInfo>
+          ) : (
+            <>
+              {isLoading && showLoading && (
+                <LoadingWrapper>
+                  <Loading />
+                </LoadingWrapper>
+              )}
+            </>
+          )}
+        </ButtonTextWrapper>
+      </Button>
+    );
+  }
+);

package/src/components/currencyDisplay/CurrencyDisplay.tsx

@@ -35,6 +35,7 @@ export interface CurrencyDisplayProps {
   gap?: number | string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [x: string]: any;
+  isPriceDiscoveryOffer?: boolean;
 }
 
 export const CurrencyDisplay = ({
@@ -45,6 +46,7 @@ export const CurrencyDisplay = ({
   iconSize,
   color,
   gap,
+  isPriceDiscoveryOffer,
   ...rest
 }: CurrencyDisplayProps) => {
   return (
@@ -60,7 +62,7 @@ export const CurrencyDisplay = ({
           $gap={gap}
           $color={color}
         >
-          {value}
+          {isPriceDiscoveryOffer ? "??" : value}
         </CurrencyDisplayValue>
       )}
     </CurrencyDisplayValueWrapper>

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

@@ -48,6 +48,7 @@ import dayjs from "dayjs";
 import { getDateTimestamp } from "../../../../../lib/dates/getDateTimestamp";
 import { LabelType, labelValueToText } from "../../../../exchangeCard/const";
 import { ExchangeStatus } from "../../../../exchangeCard/ExchangeCard.styles";
+import { PriceType } from "@bosonprotocol/common";
 
 type ActionName = "approveExchangeToken" | "depositFunds" | "commit";
 
@@ -168,6 +169,7 @@ export default function InnerCommitDetailView(
   };
   const isVoidedOffer = !!offer.voidedAt;
   const isPreview = !offer.id;
+  const isPriceDiscoveryOffer = offer.priceType === PriceType.Discovery;
   const isCommitDisabled =
     !address ||
     !hasSellerEnoughFunds ||
@@ -178,7 +180,8 @@ export default function InnerCommitDetailView(
     isPreview ||
     isOfferNotValidYet ||
     isBuyerInsufficientFunds ||
-    (offer.condition && !isConditionMet);
+    (offer.condition && !isConditionMet) ||
+    isPriceDiscoveryOffer;
   const handleOnGetSignerAddress = useCallback(
     (signerAddress: string | undefined) => {
       const isConnectWalletFromCommit = getItemFromStorage(

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

@@ -1,6 +1,7 @@
 import { ArrowRight, ArrowsLeftRight } from "phosphor-react";
 import React, { useMemo } from "react";
 import styled from "styled-components";
+import { PriceType } from "@bosonprotocol/common";
 import { Button } from "../../../../buttons/Button";
 import { Grid } from "../../../../ui/Grid";
 import { InnerDetailViewWithPortal } from "../../common/detail/InnerDetailViewWithPortal";
@@ -50,6 +51,7 @@ export function InnerCommitDetailViewWithPortal(
   );
 
   const isOfferEmpty = quantity < 1;
+  const isPriceDiscoveryOffer = offer.priceType === PriceType.Discovery;
 
   const isNotCommittableOffer =
     isOfferEmpty ||
@@ -57,7 +59,8 @@ export function InnerCommitDetailViewWithPortal(
     isExpiredOffer ||
     offer.voided ||
     !hasSellerEnoughFunds ||
-    isBuyerInsufficientFunds;
+    isBuyerInsufficientFunds ||
+    isPriceDiscoveryOffer;
 
   const tokenOrCoinSymbol = offer.exchangeToken.symbol;
   return (

package/src/components/modal/components/common/OfferFullDescription/GeneralProductData.tsx

@@ -22,6 +22,7 @@ import {
 import { Exchange } from "../../../../../types/exchange";
 import { PhygitalProduct } from "../detail/PhygitalProduct";
 import { getIsOfferRobloxGated } from "../../../../../lib/roblox/getIsOfferRobloxGated";
+import { PriceType } from "@bosonprotocol/common";
 
 const StyledPrice = styled(Price)`
   h3 {
@@ -105,6 +106,7 @@ export const GeneralProductData: React.FC<GeneralProductDataProps> = ({
             tag="h3"
             convert
             withAsterisk={false}
+            isPriceDiscoveryOffer={offer.priceType === PriceType.Discovery}
           />
         </Grid>
       </GridContainer>

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

@@ -28,6 +28,7 @@ import { DetailViewProps } from "./types";
 import { useGetOfferDetailData } from "./useGetOfferDetailData";
 import { SvgImage } from "../../../../ui/SvgImage";
 import { getIsOfferRobloxGated } from "../../../../../lib/roblox/getIsOfferRobloxGated";
+import { PriceType } from "@bosonprotocol/common";
 
 const StyledPrice = styled(Price)`
   h3 {
@@ -116,6 +117,7 @@ export const DetailViewCore = forwardRef<ElementRef<"div">, Props>(
               tag="h3"
               convert
               withAsterisk={showPriceAsterisk}
+              isPriceDiscoveryOffer={offer.priceType === PriceType.Discovery}
             />
             {priceSibling}
           </WidgetUpperGrid>

package/src/components/price/Price.tsx

@@ -56,6 +56,7 @@ interface IProps {
   isExchange?: boolean;
   tag?: keyof JSX.IntrinsicElements;
   withAsterisk?: boolean;
+  isPriceDiscoveryOffer?: boolean;
 }
 
 export default function Price({
@@ -66,6 +67,7 @@ export default function Price({
   isExchange = false,
   tag = "h4",
   withAsterisk,
+  isPriceDiscoveryOffer = false,
   ...rest
 }: IProps) {
   const [isSymbolShown] = useState<boolean>(false); // TODO: remove once CSS :has is supported
@@ -86,27 +88,51 @@ export default function Price({
           flexWrap="wrap"
           data-testid="price-grid"
         >
-          <Typography
-            tag={tag}
-            style={{
-              fontWeight: "600",
-              letterSpacing: "-1px",
-              margin: "0",
-              wordBreak: "break-word"
-            }}
-            data-icon-price
-            {...(isSymbolShown && { "data-with-symbol": true })}
-          >
-            <Tooltip content={currencySymbol} wrap={false}>
-              <CurrencyDisplay
-                currency={currencySymbol as Currencies}
-                height={18}
-              />
-            </Tooltip>
-            {displayFloat(price.price)}
-            {withAsterisk && <div>*</div>}
-          </Typography>
-          {convert && price?.currency && (
+          {isPriceDiscoveryOffer ? (
+            <Typography
+              tag={tag}
+              style={{
+                fontSize: "20px",
+                fontWeight: "500",
+                fontStyle: "italic",
+                margin: "0",
+                wordBreak: "break-word"
+              }}
+              data-icon-price
+              {...(isSymbolShown && { "data-with-symbol": true })}
+            >
+              <Tooltip content={currencySymbol} wrap={false}>
+                <CurrencyDisplay
+                  currency={currencySymbol as Currencies}
+                  height={18}
+                />
+              </Tooltip>
+              Price on discovery
+              {withAsterisk && <div>*</div>}
+            </Typography>
+          ) : (
+            <Typography
+              tag={tag}
+              style={{
+                fontWeight: "600",
+                letterSpacing: "-1px",
+                margin: "0",
+                wordBreak: "break-word"
+              }}
+              data-icon-price
+              {...(isSymbolShown && { "data-with-symbol": true })}
+            >
+              <Tooltip content={currencySymbol} wrap={false}>
+                <CurrencyDisplay
+                  currency={currencySymbol as Currencies}
+                  height={18}
+                />
+              </Tooltip>
+              {displayFloat(price.price)}
+              {withAsterisk && <div>*</div>}
+            </Typography>
+          )}
+          {convert && !isPriceDiscoveryOffer && price?.currency && (
             <ConvertedPrice price={price} isExchange={isExchange} />
           )}
         </Grid>

package/src/components/productCard/ProductCard.tsx

@@ -60,6 +60,7 @@ export interface IProductCard {
   className?: string;
   currencyColor?: CurrencyDisplayProps["color"];
   status?: ExchangeCardStatus;
+  isPriceDiscoveryOffer?: boolean;
 }
 
 const Wrapper = ({
@@ -99,7 +100,8 @@ export const ProductCard = (props: IProductCard) => {
     isImageFitCover = false,
     className,
     productType,
-    currencyColor
+    currencyColor,
+    isPriceDiscoveryOffer = false
   } = props;
 
   const [isHovered, setIsHovered] = useState(false);
@@ -152,6 +154,7 @@ export const ProductCard = (props: IProductCard) => {
                 color={currencyColor}
                 iconSize={16}
                 gap={"0.3125rem"}
+                isPriceDiscoveryOffer={isPriceDiscoveryOffer}
                 style={{
                   alignItems: "center",
                   justifyContent: "center"

package/src/index.tsx

@@ -27,6 +27,8 @@ export * from "./components/cta/offer/CommitButton";
 export * from "./components/cta/offer/ThemedCommitButton";
 export * from "./components/cta/offer/CreateOfferButton";
 export * from "./components/cta/offer/VoidButton";
+export * from "./components/cta/offer/ReserveRangeButton";
+export * from "./components/cta/offer/PreMintButton";
 export * from "./components/currencyDisplay/CurrencyDisplay";
 export * from "./components/error/ErrorMessage";
 export * from "./components/error/SimpleError";

package/src/stories/ProductCard.stories.tsx

@@ -70,7 +70,8 @@ ProductCardPrimary.args = {
       errorImageText: "Unable to ..."
     }
   },
-  bottomText: "Redeemable until 30 days after commit"
+  bottomText: "Redeemable until 30 days after commit",
+  isPriceDiscoveryOffer: false
 };
 
 ProductCardPrimary.decorators = [(Story) => wrapper(Story)];

package/src/stories/cta/offer/PreMintButton.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { PreMintButton } from "../../../components/cta/offer/PreMintButton";
+
+import { hooks } from "../../helpers/connect-wallet";
+import { CtaButtonWrapper } from "../../helpers/CtaButtonWrapper";
+
+export default {
+  title: "Visual Components/CTA/Offer/PreMintButton",
+  component: PreMintButton,
+  parameters: {
+    // TODO: delete once storybook doesnt freeze if an arg is an object https://github.com/storybookjs/storybook/issues/17098
+    docs: {
+      source: {
+        type: "code"
+      }
+    }
+  }
+} as ComponentMeta<typeof PreMintButton>;
+
+const Template: ComponentStory<typeof PreMintButton> = (
+  args: Parameters<typeof PreMintButton>[0]
+) => {
+  const provider = hooks.useProvider();
+
+  return (
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
+      <PreMintButton
+        {...args}
+        coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}
+      />
+    </CtaButtonWrapper>
+  );
+};
+
+export const Simple: ComponentStory<typeof PreMintButton> = Template.bind({});
+
+Simple.args = {
+  coreSdkConfig: {
+    configId: "testing-80002-0",
+    envName: "testing",
+    web3Provider: undefined
+  },
+  offerId: "28",
+  amount: 5,
+  onPendingSignature: () => {
+    console.log("----------ON PENDING SIGNATURE-------------");
+  },
+  onPendingTransaction: (txHash: string) => {
+    console.log("----------ON PENDING TRANSACTION-------------");
+    console.log("txHash", txHash);
+  },
+  onSuccess: (receipt, payload) => {
+    console.log("----------ON SUCCESS-------------");
+    console.log("receipt", receipt);
+    console.log("payload", payload);
+  },
+  onError: (error) => {
+    console.log("----------ON ERROR-------------");
+    console.log("error", error);
+  }
+};

package/src/stories/cta/offer/ReserveRangeButton.stories.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { ReserveRangeButton } from "../../../components/cta/offer/ReserveRangeButton";
+
+import { hooks } from "../../helpers/connect-wallet";
+import { CtaButtonWrapper } from "../../helpers/CtaButtonWrapper";
+
+export default {
+  title: "Visual Components/CTA/Offer/ReserveRangeButton",
+  component: ReserveRangeButton,
+  parameters: {
+    // TODO: delete once storybook doesnt freeze if an arg is an object https://github.com/storybookjs/storybook/issues/17098
+    docs: {
+      source: {
+        type: "code"
+      }
+    }
+  }
+} as ComponentMeta<typeof ReserveRangeButton>;
+
+const Template: ComponentStory<typeof ReserveRangeButton> = (
+  args: Parameters<typeof ReserveRangeButton>[0]
+) => {
+  const provider = hooks.useProvider();
+
+  return (
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
+      <ReserveRangeButton
+        {...args}
+        coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}
+      />
+    </CtaButtonWrapper>
+  );
+};
+
+export const Simple: ComponentStory<typeof ReserveRangeButton> = Template.bind(
+  {}
+);
+
+Simple.args = {
+  coreSdkConfig: {
+    configId: "testing-80002-0",
+    envName: "testing",
+    web3Provider: undefined
+  },
+  offerId: "28",
+  length: 5,
+  to: "seller",
+  onPendingSignature: () => {
+    console.log("----------ON PENDING SIGNATURE-------------");
+  },
+  onPendingTransaction: (txHash: string) => {
+    console.log("----------ON PENDING TRANSACTION-------------");
+    console.log("txHash", txHash);
+  },
+  onSuccess: (receipt, payload) => {
+    console.log("----------ON SUCCESS-------------");
+    console.log("receipt", receipt);
+    console.log("payload", payload);
+  },
+  onError: (error) => {
+    console.log("----------ON ERROR-------------");
+    console.log("error", error);
+  }
+};