@bosonprotocol/react-kit 0.29.0-alpha.9 → 0.29.0

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/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/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

@@ -96,6 +96,7 @@ interface IVideo {
   showPlaceholderText?: boolean;
   noPreload?: boolean;
   videoProps?: VideoHTMLAttributes<HTMLElement>;
+  withMuteButton?: boolean;
   componentWhileLoading?: () => ReactElement;
 }
 const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
@@ -105,6 +106,7 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
   showPlaceholderText = true,
   noPreload = false,
   videoProps,
+  withMuteButton,
   componentWhileLoading: ComponentWhileLoading,
   ...rest
 }) => {
@@ -222,10 +224,12 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
       {children || ""}
       {videoSrc && (
         <>
-          <StyledMuteButton
-            muted={muted}
-            onClick={() => setMuted((prev) => !prev)}
-          />
+          {withMuteButton && (
+            <StyledMuteButton
+              muted={muted}
+              onClick={() => setMuted((prev) => !prev)}
+            />
+          )}
           <VideoHtml
             ref={videoRef}
             data-testid={dataTestId}

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/finance/FinanceWidget.tsx

@@ -7,32 +7,20 @@ import styled from "styled-components";
 import { useAccount } from "../../../hooks/connection/connection";
 import { useDisconnect } from "../../../hooks/connection/useDisconnect";
 import { useCurrentSellers } from "../../../hooks/useCurrentSellers";
-import { CONFIG } from "../../../lib/config/config";
-import {
-  ConfigProvider,
-  ConfigProviderProps
-} from "../../config/ConfigProvider";
-import { MagicProvider } from "../../magicLink/MagicProvider";
-import ModalProvider from "../../modal/ModalProvider";
-import { SignerProvider } from "../../signer/SignerProvider";
-import GlobalStyle from "../../styles/GlobalStyle";
 import { Grid } from "../../ui/Grid";
 import Loading from "../../ui/loading/Loading";
 import ConnectButton from "../../wallet/ConnectButton";
-import WalletConnectionProvider from "../../wallet/WalletConnectionProvider";
-import { getParentWindowOrigin } from "../common";
-import { CommonWidgetTypes } from "../types";
 import Finance, { Props } from "./Finance";
-import ConvertionRateProvider, {
-  ConvertionRateProviderProps
-} from "./convertion-rate/ConvertionRateProvider";
 import { useConvertionRate } from "./convertion-rate/useConvertionRate";
 import { useExchangeTokens } from "./exchange-tokens/useExchangeTokens";
 import useFunds from "./useFunds";
 import { useOffersBacked } from "./useOffersBacked";
 import { useSellerDeposit } from "./useSellerDeposit";
 import { useSellerRoles } from "./useSellerRoles";
-import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
+import {
+  FinanceWidgetProviders,
+  FinanceWidgetProvidersProps
+} from "./FinanceWidgetProviders";
 dayjs.extend(isBetween);
 
 const StyledConnectButton = styled(ConnectButton)`
@@ -146,49 +134,20 @@ function WithSellerData(WrappedComponent: React.ComponentType<Props>) {
 }
 
 const Component = WithSellerData(Finance);
-type FinanceWidgetProps = {
-  walletConnectProjectId: string;
-} & Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
-  CommonWidgetTypes &
-  ConvertionRateProviderProps & {
-    sellerId: string | null | undefined;
-  };
-
-const { infuraKey, magicLinkKey } = CONFIG;
+type FinanceWidgetProps = FinanceWidgetProvidersProps & {
+  sellerId: string | null | undefined;
+};
 
 export function FinanceWidget(props: FinanceWidgetProps) {
-  const parentOrigin = getParentWindowOrigin();
-  const { walletConnectProjectId, sellerId, withExternalSigner } = props;
+  const { sellerId, withExternalSigner } = props;
   return (
-    <ConfigProvider
-      magicLinkKey={magicLinkKey}
-      infuraKey={infuraKey}
-      {...props}
-    >
-      <GlobalStyle />
-      <SignerProvider
-        parentOrigin={parentOrigin}
-        withExternalSigner={withExternalSigner}
-      >
-        <MagicProvider>
-          <WalletConnectionProvider
-            walletConnectProjectId={walletConnectProjectId}
-          >
-            <ConvertionRateProvider>
-              <ModalProvider>
-                {!withExternalSigner && (
-                  <Grid justifyContent="flex-end">
-                    <StyledConnectButton showChangeWallet />
-                  </Grid>
-                )}
-                <Component sellerId={sellerId ?? undefined} />
-              </ModalProvider>
-            </ConvertionRateProvider>
-          </WalletConnectionProvider>
-        </MagicProvider>
-      </SignerProvider>
-    </ConfigProvider>
+    <FinanceWidgetProviders {...props}>
+      {!withExternalSigner && (
+        <Grid justifyContent="flex-end">
+          <StyledConnectButton showChangeWallet />
+        </Grid>
+      )}
+      <Component sellerId={sellerId ?? undefined} />
+    </FinanceWidgetProviders>
   );
 }
-
-export default withQueryClientProvider(FinanceWidget);

package/src/components/widgets/finance/FinanceWidgetProviders.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from "react";
+import { CONFIG } from "../../../lib/config/config";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
+import { Omit } from "utility-types";
+import { CommonWidgetTypes } from "../types";
+import { SignerProvider } from "../../signer/SignerProvider";
+import GlobalStyle from "../../styles/GlobalStyle";
+import {
+  ConfigProvider,
+  ConfigProviderProps
+} from "../../config/ConfigProvider";
+import ConvertionRateProvider, {
+  ConvertionRateProviderProps
+} from "./convertion-rate/ConvertionRateProvider";
+import WalletConnectionProvider, {
+  WalletConnectionProviderProps
+} from "../../wallet/WalletConnectionProvider";
+import ModalProvider from "../../modal/ModalProvider";
+import { MagicProvider } from "../../magicLink/MagicProvider";
+import { getParentWindowOrigin } from "../common";
+
+export type FinanceWidgetProvidersProps = Omit<
+  WalletConnectionProviderProps,
+  "children" | "envName"
+> &
+  Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
+  CommonWidgetTypes &
+  ConvertionRateProviderProps & {
+    children: ReactNode;
+  };
+
+const { infuraKey, magicLinkKey } = CONFIG;
+
+export const FinanceWidgetProviders: React.FC<FinanceWidgetProvidersProps> =
+  withQueryClientProvider(({ children, ...props }) => {
+    const parentOrigin = getParentWindowOrigin();
+    return (
+      <ConfigProvider
+        magicLinkKey={magicLinkKey}
+        infuraKey={infuraKey}
+        {...props}
+      >
+        <GlobalStyle />
+        <SignerProvider
+          parentOrigin={parentOrigin}
+          withExternalSigner={props.withExternalSigner}
+        >
+          <MagicProvider>
+            <WalletConnectionProvider
+              walletConnectProjectId={props.walletConnectProjectId}
+            >
+              <ConvertionRateProvider>
+                <ModalProvider>{children}</ModalProvider>
+              </ConvertionRateProvider>
+            </WalletConnectionProvider>
+          </MagicProvider>
+        </SignerProvider>
+      </ConfigProvider>
+    );
+  });

package/src/hooks/useCtaClickHandler.ts

@@ -135,9 +135,14 @@ export function useCtaClickHandler<T>({
         onSuccess?.(receipt as providers.TransactionReceipt, payload);
       }
     } catch (error) {
-      onError?.(error as Error, {
-        txResponse: txResponse as providers.TransactionResponse
-      });
+      onError?.(
+        typeof error === "object"
+          ? (coreSdk.parseError(error as object) as Error)
+          : (error as Error),
+        {
+          txResponse: txResponse as providers.TransactionResponse
+        }
+      );
     } finally {
       setIsLoading(false);
     }

package/src/hooks/useCurrentSellers.ts

@@ -360,7 +360,9 @@ export function useCurrentSellers(
       resultByAddress.data
         ? resultByAddress.data.sellers.map((seller) => seller.id)
         : sellerAddressType === "SELLER_IDS"
-        ? [sellerAddress]
+        ? Array.isArray(sellerAddress)
+          ? sellerAddress
+          : [sellerAddress]
         : []
     ).filter((sellerId) => !!sellerId) as string[];
   }, [resultByAddress.data, sellerAddress, sellerAddressType]);

package/src/index.tsx

@@ -6,6 +6,7 @@ export { default as ThemedButton, IButton } from "./components/ui/ThemedButton";
 export * from "./components/ui/zIndex";
 export * from "./components/ui/buttonSize";
 export * from "./components/buttons/Button";
+export * from "./components/buttons/CommitButtonView";
 export * from "./components/cta/exchange/BatchCompleteButton";
 export * from "./components/cta/exchange/CancelButton";
 export * from "./components/cta/exchange/CompleteButton";
@@ -49,6 +50,7 @@ export * from "./components/magicLink/MagicProvider";
 export * from "./components/magicLink/UserContext";
 export * from "./components/modal/components/common/OfferFullDescription/ExternalOfferFullDescription";
 export * from "./components/modal/components/common/detail/useGetOfferDetailData";
+export * from "./components/modal/components/PurchaseOverview/PurchaseOverview";
 export * from "./components/modal/components/Commit/DetailView/ExternalCommitDetailView";
 export * from "./components/modal/components/Redeem/DetailView/ExternalExchangeDetailView";
 export * from "./components/ui/Grid";

package/src/lib/const/chainInfo.ts

@@ -62,15 +62,6 @@ const CHAIN_INFO: ChainInfoMap = {
     logoUrl: ethereumLogoUrl,
     nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 }
   },
-  [ChainId.GOERLI]: {
-    networkType: NetworkType.L1,
-    docs: "https://docs.uniswap.org/",
-    explorer: "https://goerli.etherscan.io/",
-    infoLink: "https://info.uniswap.org/#/",
-    label: "Görli",
-    logoUrl: ethereumLogoUrl,
-    nativeCurrency: { name: "Görli Ether", symbol: "görETH", decimals: 18 }
-  },
   [ChainId.SEPOLIA]: {
     networkType: NetworkType.L1,
     docs: "https://docs.uniswap.org/",

package/src/lib/const/chains.ts

@@ -22,8 +22,8 @@ export const CHAIN_IDS_TO_NAMES = {
  */
 export const L1_CHAIN_IDS = [
   ChainId.MAINNET,
-  ChainId.GOERLI,
-  // ChainId.SEPOLIA,
+  // ChainId.GOERLI,
+  ChainId.SEPOLIA,
   ChainId.POLYGON,
   ChainId.POLYGON_MUMBAI
   // LocalChainId

package/src/lib/errors/eth-revert-reason.ts

@@ -45,7 +45,7 @@ async function validateInputPreProvider(txHash: string, network: string) {
   ) {
     throw new Error("Invalid transaction hash");
   }
-  const networks = ["mainnet", "kovan", "goerli", "ropsten", "rinkeby"];
+  const networks = ["mainnet", "sepolia"];
   if (!networks.includes(network)) {
     throw new Error("Not a valid network");
   }

package/src/lib/numbers/numbers.ts

@@ -1,23 +1,17 @@
-import { BigNumber } from "ethers";
+import { utils } from "ethers";
 
 export const getNumberWithoutDecimals = (
   value: string,
   decimals: string
 ): string => {
-  const valueAsNumber = Number(value);
-  if (!Number.isInteger(valueAsNumber)) {
-    return Math.floor(valueAsNumber * 10 ** Number(decimals)).toString();
-  }
-  return BigNumber.from(valueAsNumber + "")
-    .mul(BigNumber.from(10).pow(BigNumber.from(decimals)))
-    .toString();
+  return utils.parseUnits(value, decimals).toString();
 };
 
 export const getNumberWithDecimals = (
   value: string,
   decimals: string
 ): number => {
-  return Number(value) * 10 ** -Number(decimals);
+  return Number(utils.formatUnits(value, decimals));
 };
 
 /**

package/src/lib/opensea/getOpenSeaUrl.ts

@@ -11,11 +11,6 @@ const openSeaUrlMap = new Map([
         (tokenId: string, contractAddress: string) =>
           `https://testnets.opensea.io/assets/mumbai/${contractAddress}/${tokenId}`
       ],
-      [
-        "testing-5-0",
-        (tokenId: string, contractAddress: string) =>
-          `https://testnets.opensea.io/assets/goerli/${contractAddress}/${tokenId}`
-      ],
       [
         "testing-11155111-0",
         (tokenId: string, contractAddress: string) =>
@@ -31,11 +26,6 @@ const openSeaUrlMap = new Map([
         (tokenId: string, contractAddress: string) =>
           `https://testnets.opensea.io/assets/mumbai/${contractAddress}/${tokenId}`
       ],
-      [
-        "staging-5-0",
-        (tokenId: string, contractAddress: string) =>
-          `https://testnets.opensea.io/assets/goerli/${contractAddress}/${tokenId}`
-      ],
       [
         "staging-11155111-0",
         (tokenId: string, contractAddress: string) =>

package/src/stories/PurchaseOverview.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { PurchaseOverview } from "../components/modal/components/PurchaseOverview/PurchaseOverview";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Visual Components/PurchaseOverview",
+  component: PurchaseOverview,
+  argTypes: {
+    lookAndFeel: {
+      options: ["modal", "regular"],
+      control: { type: "radio" }
+    }
+  }
+} as ComponentMeta<typeof PurchaseOverview>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof PurchaseOverview> = (args) => (
+  <PurchaseOverview {...args} />
+);
+
+export const Base: ComponentStory<typeof PurchaseOverview> = Template.bind({});
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Base.args = {
+  hideModal: () => console.log("hideModal"),
+  lookAndFeel: "modal",
+  modalMargin: "2%"
+};