@bosonprotocol/react-kit 0.28.1-alpha.0 → 0.28.2-alpha.0

package/dist/esm/components/widgets/finance/FinanceWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FinanceWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/finance/FinanceWidget.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,mBAAmB,EACpB,MAAM,6BAA6B,CAAC;AAUrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,OAA+B,EAC7B,2BAA2B,EAC5B,MAAM,0CAA0C,CAAC;AAgIlD,KAAK,kBAAkB,GAAG;IACxB,sBAAsB,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,WAAW,CAAC,GACzD,iBAAiB,GACjB,2BAA2B,GAAG;IAC5B,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACrC,CAAC;AAIJ,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAmCtD;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FinanceWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/finance/FinanceWidget.tsx"],"names":[],"mappings":";AAWA,OAAO,EAEL,mBAAmB,EACpB,MAAM,6BAA6B,CAAC;AAUrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,OAA+B,EAC7B,2BAA2B,EAC5B,MAAM,0CAA0C,CAAC;AAgIlD,KAAK,kBAAkB,GAAG;IACxB,sBAAsB,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,WAAW,CAAC,GACzD,iBAAiB,GACjB,2BAA2B,GAAG;IAC5B,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACrC,CAAC;AAIJ,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAmCtD;AAED,eAAe,aAAa,CAAC"}

package/dist/esm/components/widgets/redemption/RedeemModalWithExchange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RedeemModalWithExchange.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/redemption/RedeemModalWithExchange.tsx"],"names":[],"mappings":"AAEA,OAAuB,EACrB,mBAAmB,EACpB,MAAM,8CAA8C,CAAC;AAsBtD,eAAO,MAAM,uBAAuB,UAhBzB,KAAK,mBAAmB,EAAE,UAAU,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,gBAgBP,CAAC"}
+{"version":3,"file":"RedeemModalWithExchange.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/redemption/RedeemModalWithExchange.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EAEpB,MAAM,8CAA8C,CAAC;AAsBtD,eAAO,MAAM,uBAAuB,UAhBzB,KAAK,mBAAmB,EAAE,UAAU,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,gBAgBD,CAAC"}

package/dist/esm/components/widgets/redemption/RedeemModalWithExchange.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { useExchanges } from "../../../hooks/useExchanges";
-import RedeemNonModal from "../../modal/components/Redeem/RedeemNonModal";
+import { PublicRedeemNonModal } from "../../modal/components/Redeem/RedeemNonModal";
 function WithExchange(WrappedComponent) {
     const ComponentWithExchange = (props) => {
         const { data: exchanges } = useExchanges({
@@ -13,5 +13,5 @@ function WithExchange(WrappedComponent) {
     };
     return ComponentWithExchange;
 }
-export const RedeemModalWithExchange = WithExchange(RedeemNonModal);
+export const RedeemModalWithExchange = WithExchange(PublicRedeemNonModal);
 //# sourceMappingURL=RedeemModalWithExchange.js.map

package/dist/esm/components/widgets/redemption/RedeemModalWithExchange.js.map

@@ -1 +1 @@
-{"version":3,"file":"RedeemModalWithExchange.js","sourceRoot":"","sources":["../../../../../src/components/widgets/redemption/RedeemModalWithExchange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,cAEN,MAAM,8CAA8C,CAAC;AAEtD,SAAS,YAAY,CACnB,gBAA0D;IAE1D,MAAM,qBAAqB,GAAG,CAC5B,KAAsE,EACtE,EAAE;QACF,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,YAAY,CACtC;YACE,EAAE,EAAE,KAAK,CAAC,UAAU;SACrB,EACD;YACE,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU;SAC5B,CACF,CAAC;QACF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QAChC,OAAO,oBAAC,gBAAgB,OAAK,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IAC7D,CAAC,CAAC;IACF,OAAO,qBAAqB,CAAC;AAC/B,CAAC;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"RedeemModalWithExchange.js","sourceRoot":"","sources":["../../../../../src/components/widgets/redemption/RedeemModalWithExchange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAEL,oBAAoB,EACrB,MAAM,8CAA8C,CAAC;AAEtD,SAAS,YAAY,CACnB,gBAA0D;IAE1D,MAAM,qBAAqB,GAAG,CAC5B,KAAsE,EACtE,EAAE;QACF,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,YAAY,CACtC;YACE,EAAE,EAAE,KAAK,CAAC,UAAU;SACrB,EACD;YACE,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU;SAC5B,CACF,CAAC;QACF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QAChC,OAAO,oBAAC,gBAAgB,OAAK,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IAC7D,CAAC,CAAC;IACF,OAAO,qBAAqB,CAAC;AAC/B,CAAC;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.28.1-alpha.0",
+  "version": "0.28.2-alpha.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,19 +15,21 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.39.1-alpha.0",
-    "@bosonprotocol/ethers-sdk": "^1.13.2-alpha.0",
+    "@bosonprotocol/core-sdk": "^1.39.1",
+    "@bosonprotocol/ethers-sdk": "^1.13.2",
     "@bosonprotocol/ipfs-storage": "^1.11.2",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
     "@glidejs/glide": "3.6.0",
     "@rainbow-me/rainbowkit": "^1.3.4",
     "@sentry/browser": "7.43.0",
+    "@svgr/webpack": "^8.1.0",
     "@tippyjs/react": "4.2.6",
     "@uniswap/redux-multicall": "^1.1.8",
     "@uniswap/sdk-core": "^4.0.7",
     "@uniswap/token-lists": "^1.0.0-beta.33",
     "ajv": "^8.12.0",
+    "babel-plugin-styled-components": "^2.1.4",
     "chart.js": "^4.4.1",
     "cids": "^1.1.9",
     "dayjs": "1.11.7",
@@ -56,7 +58,7 @@
     "rehype-raw": "6.1.1",
     "remark-gfm": "3.0.1",
     "slick-carousel": "^1.8.1",
-    "styled-components": "^6.1.1",
+    "styled-components": "^6.1.8",
     "stylis": "^4.3.0",
     "tippy.js": "6.3.7",
     "use-async-effect": "2.2.7",
@@ -74,8 +76,8 @@
     "lint": "eslint --ignore-path ../../.gitignore --ext .jsx,.tsx .",
     "eject": "react-scripts eject",
     "clean": "rimraf build coverage .turbo node_modules",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "build": "rimraf dist && tsc && tsc --build tsconfig.cjs.json",
     "copy-assets": "copyfiles -u 2 \"src/assets/**/*\" dist/esm/assets/ && copyfiles -u 2 \"src/assets/**/*\" dist/cjs/assets/",
     "postbuild": "npm run copy-assets"
@@ -84,7 +86,8 @@
     "extends": [
       "../../.eslintrc",
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:storybook/recommended"
     ],
     "overrides": [
       {
@@ -115,16 +118,17 @@
     }
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
+    "@chromatic-com/storybook": "^1.2.18",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-onboarding": "^8.0.0",
+    "@storybook/addon-themes": "^8.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/test": "^8.0.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
@@ -141,11 +145,11 @@
     "@web3-react/core": "8.2.3",
     "@web3-react/metamask": "8.2.4",
     "babel-plugin-named-exports-order": "^0.0.2",
-    "babel-plugin-styled-components": "^2.0.7",
     "buffer": "6.0.3",
     "copyfiles": "^2.4.1",
     "customize-cra": "^1.0.0",
     "eslint": "^8.10.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "file-loader": "^6.2.0",
     "jest": "^29.6.2",
     "prop-types": "^15.8.1",
@@ -154,7 +158,7 @@
     "react-docgen-typescript-plugin": "^1.0.5",
     "react-scripts": "5.0.0",
     "rimraf": "^3.0.2",
-    "storybook-addon-styled-component-theme": "^2.0.0",
+    "storybook": "^8.0.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.1.6",
     "url-loader": "^4.1.1",
@@ -164,5 +168,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "1438d783a58f9813c0611f261c707d0c0edc1a0c"
+  "gitHead": "374cf0964958abe1bd924ba2ebd317b6917ac9ad"
 }

package/src/components/logo/PortfolioLogo.tsx

@@ -1,6 +1,6 @@
 import { ChainId, Currency } from "@uniswap/sdk-core";
 import blankTokenUrl from "../../assets/svg/blank_token.svg";
-import { ReactComponent as UnknownStatus } from "../../assets/svg/contract-interaction.svg";
+import UnknownStatus from "../../assets/svg/contract-interaction.svg";
 import React from "react";
 import styled from "styled-components";
 import { MissingImageLogo } from "./AssetLogo";
@@ -168,5 +168,7 @@ function getLogo({
       />
     );
   }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   return <UnknownContract width={size} height={size} />;
 }

package/src/components/modal/components/Commit/CommitNonModal.tsx

@@ -34,7 +34,7 @@ export type CommitNonModalProps = Pick<
   OfferVariantViewProps,
   "onClickBuyOrSwap" | "onAlreadyOwnOfferClick"
 > & {
-  variants: VariantV1[] | undefined;
+  variants?: VariantV1[];
   showBosonLogo?: boolean;
   defaultSelectedOfferId?: string;
   disableVariationsSelects?: boolean;
@@ -48,10 +48,7 @@ export type CommitNonModalProps = Pick<
   lookAndFeel: "regular" | "modal";
 };
 
-export default function CommitWrapper({
-  hideModal,
-  ...props
-}: CommitNonModalProps) {
+export function CommitWrapper({ hideModal, ...props }: CommitNonModalProps) {
   return (
     <NonModal
       hideModal={hideModal}

package/src/components/modal/components/Redeem/RedeemNonModal.tsx

@@ -227,7 +227,7 @@ export type RedeemNonModalProps = Pick<
     withExternalSigner: boolean | undefined | null;
   };
 
-export default function RedeemWrapper({
+export function PublicRedeemNonModal({
   hideModal,
   ...props
 }: RedeemNonModalProps) {

package/src/components/modal/components/common/BosonFooter.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import { ReactComponent } from "../../../../assets/logo.svg";
+import ReactComponent from "../../../../assets/logo.svg";
 import { Grid } from "../../../ui/Grid";
 
 export function BosonFooter() {
   return (
     <Grid justifyContent="center" padding="1.5rem 0">
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore  */}
       <ReactComponent height="24px" />
     </Grid>
   );

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

@@ -1,9 +1,8 @@
-import React, { useMemo } from "react";
+import React from "react";
 import styled from "styled-components";
 import { useIsPhygital } from "../../../../../hooks/offer/useIsPhygital";
 import { getOfferDetails } from "../../../../../lib/offer/getOfferDetails";
 import { Exchange } from "../../../../../types/exchange";
-import { isTruthy } from "../../../../../types/helpers";
 import { Offer } from "../../../../../types/offer";
 import { DetailChart } from "../../../../detail/DetailChart";
 import { Grid } from "../../../../ui/Grid";
@@ -12,13 +11,12 @@ import { Typography } from "../../../../ui/Typography";
 import { Content } from "../../../nonModal/styles";
 import DetailTable from "../detail/DetailTable";
 import DetailTransactions from "../detail/DetailTransactions";
-import { SlickSlider, initialSettings } from "../detail/SlickSlider";
 import { OnClickBuyOrSwapHandler } from "../detail/types";
 import { UseGetOfferDetailDataProps } from "../detail/useGetOfferDetailData";
-import { GeneralProductData } from "./GeneralProductData";
 import { DigitalProductData } from "./DigitalProductData";
-import { PhysicalProductData } from "./PhysicalProductData";
+import { GeneralProductData } from "./GeneralProductData";
 import { Overview } from "./Overview";
+import { PhysicalProductData } from "./PhysicalProductData";
 
 const InventoryGraph = styled(DetailChart)`
   width: 100%;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Typography } from "../../../../ui/Typography";
-import { ReactComponent } from "../../../../../assets/redeemeum.svg";
+import ReactComponent from "../../../../../assets/redeemeum.svg";
 
 export const DetailDisputeResolver = {
   name: "Dispute resolver",
@@ -16,6 +16,8 @@ export const DetailDisputeResolver = {
     </>
   ),
   value: () => {
+    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+    /* @ts-ignore  */
     return <ReactComponent width="100" height="18" />;
   }
 };

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

@@ -2,7 +2,7 @@ import { Cube, Info, Lock, LockOpen } from "phosphor-react";
 import React, { ElementRef, forwardRef, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
-import { ReactComponent as Logo } from "../../../../../assets/logo.svg";
+import Logo from "../../../../../assets/logo.svg";
 import { useIsPhygital } from "../../../../../hooks/offer/useIsPhygital";
 import { theme } from "../../../../../theme";
 import { useConfigContext } from "../../../../config/ConfigContext";

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

@@ -8,7 +8,7 @@ import Video from "../../../../ui/Video";
 import styled, { CSSProperties, css } from "styled-components";
 import { theme } from "../../../../../theme";
 import { ImageOptimizationOpts } from "../../../../../lib/images/images";
-export { Settings } from "react-slick";
+export type { Settings } from "react-slick";
 
 const colors = theme.colors.light;
 const Container = styled.div<{ $alignLeft: boolean; $hasSomeActive: boolean }>`

package/src/components/wallet/ConnectButton.tsx

@@ -3,7 +3,7 @@ import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
 import * as Sentry from "@sentry/browser";
 import styled from "styled-components";
 
-import metamaskLogo from "../../assets/metamask-logo.svg";
+import MetamaskLogo from "../../assets/metamask-logo.svg";
 import FallbackAvatar from "../avatar/fallback-avatar";
 import { Button } from "../buttons/Button";
 import ThemedButton from "../ui/ThemedButton";
@@ -44,9 +44,12 @@ const InnerProvider = ({ children }: { children: ReactNode }) => {
   );
 };
 
-const MetaMaskLogo = styled.img`
+const StyledMetamaskLogo = styled(MetamaskLogo).attrs({ id: "metamask-logo" })`
   height: 15px;
   width: 16px;
+  &#metamask-logo path {
+    stroke: initial !important;
+  }
 `;
 
 const ENSAvatar = styled.img`
@@ -136,7 +139,7 @@ export default function ConnectButton({
                             }}
                           >
                             Connect Wallet
-                            {!isLteXS && <MetaMaskLogo src={metamaskLogo} />}
+                            {!isLteXS && <StyledMetamaskLogo />}
                           </Button>
                         </>
                       );

package/src/components/widgets/commit/CommitModalWithOffer.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import CommitNonModal, {
-  CommitNonModalProps
+import {
+  CommitNonModalProps,
+  CommitWrapper
 } from "../../modal/components/Commit/CommitNonModal";
 import { useProductByUuid } from "../../../hooks/products/useProductByUuid";
 import useProductByOfferId from "../../../hooks/products/useProductByOfferId";
@@ -99,4 +100,4 @@ function WithProductOrOffer(
   return ComponentWithProductOrOffer;
 }
 
-export const CommitModalWithOffer = WithProductOrOffer(CommitNonModal);
+export const CommitModalWithOffer = WithProductOrOffer(CommitWrapper);

package/src/components/widgets/commit/CommitWidget.tsx

@@ -27,11 +27,10 @@ type CommitProps = {
         sellerId: string;
         bundleUuid: string;
       }
-  ) &
-  (
-    | { lookAndFeel: "regular" }
-    | { lookAndFeel: "modal"; modalMargin?: CSSProperties["margin"] }
-  );
+  ) & {
+    lookAndFeel: "regular" | "modal";
+    modalMargin?: CSSProperties["margin"];
+  };
 export type CommitWidgetProps = CommitProps & CommitWidgetProvidersProps;
 export function CommitWidget(props: CommitWidgetProps) {
   const Container = useCallback(

package/src/components/widgets/redemption/RedeemModalWithExchange.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { useExchanges } from "../../../hooks/useExchanges";
-import RedeemNonModal, {
-  RedeemNonModalProps
+import {
+  RedeemNonModalProps,
+  PublicRedeemNonModal
 } from "../../modal/components/Redeem/RedeemNonModal";
 
 function WithExchange(
@@ -24,4 +25,4 @@ function WithExchange(
   return ComponentWithExchange;
 }
 
-export const RedeemModalWithExchange = WithExchange(RedeemNonModal);
+export const RedeemModalWithExchange = WithExchange(PublicRedeemNonModal);