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

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/dist/esm/lib/config/config.js

@@ -1,11 +1,11 @@
 import { getRpcUrls } from "../const/networks";
-const magicLinkKey = process.env.REACT_APP_MAGIC_API_KEY;
+const magicLinkKey = process.env.STORYBOOK_REACT_APP_MAGIC_API_KEY;
 if (!magicLinkKey) {
-    throw new Error("REACT_APP_MAGIC_API_KEY is not defined");
+    throw new Error("STORYBOOK_REACT_APP_MAGIC_API_KEY is not defined");
 }
-const infuraKey = process.env.REACT_APP_INFURA_KEY;
+const infuraKey = process.env.STORYBOOK_INFURA_PROJECT_SECRET;
 if (!infuraKey) {
-    throw new Error("REACT_APP_INFURA_KEY is not defined");
+    throw new Error("STORYBOOK_INFURA_PROJECT_SECRET is not defined");
 }
 export const CONFIG = {
     magicLinkKey,

package/dist/esm/lib/config/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../src/lib/config/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC;AACzD,IAAI,CAAC,YAAY,EAAE;IACjB,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;CAC3D;AACD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC;AACnD,IAAI,CAAC,SAAS,EAAE;IACd,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAC;CACxD;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,YAAY;IACZ,SAAS;IACT,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC;CACtB,CAAC"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../src/lib/config/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,iCAAiC,CAAC;AACnE,IAAI,CAAC,YAAY,EAAE;IACjB,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;CACrE;AACD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC;AAC9D,IAAI,CAAC,SAAS,EAAE;IACd,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;CACnE;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,YAAY;IACZ,SAAS;IACT,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC;CACtB,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.1",
+  "version": "0.28.2-alpha.1",
   "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.1",
-    "@bosonprotocol/ethers-sdk": "^1.13.2-alpha.1",
+    "@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,12 @@
     "@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",
+    "chromatic": "^11.0.8",
     "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 +159,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 +169,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "7382a37694c85c107d1394bcc11e2df156fcb079"
+  "gitHead": "7ea47c7ec3927c8be7444a889b2c85af63345c4c"
 }

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

@@ -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/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);

package/src/lib/config/config.ts

@@ -1,12 +1,12 @@
 import { getRpcUrls } from "../const/networks";
 
-const magicLinkKey = process.env.REACT_APP_MAGIC_API_KEY;
+const magicLinkKey = process.env.STORYBOOK_REACT_APP_MAGIC_API_KEY;
 if (!magicLinkKey) {
-  throw new Error("REACT_APP_MAGIC_API_KEY is not defined");
+  throw new Error("STORYBOOK_REACT_APP_MAGIC_API_KEY is not defined");
 }
-const infuraKey = process.env.REACT_APP_INFURA_KEY;
+const infuraKey = process.env.STORYBOOK_INFURA_PROJECT_SECRET;
 if (!infuraKey) {
-  throw new Error("REACT_APP_INFURA_KEY is not defined");
+  throw new Error("STORYBOOK_INFURA_PROJECT_SECRET is not defined");
 }
 
 export const CONFIG = {

package/src/stories/cta/funds/WithdrawFundsButton.stories.tsx

@@ -1,11 +1,11 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React, { useRef } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { WithdrawFundsButton } from "../../../components/cta/funds/WithdrawFundsButton";
 
+import { BigNumber } from "ethers";
 import { hooks } from "../../helpers/connect-wallet";
 import { CtaButtonWrapper } from "../../helpers/CtaButtonWrapper";
-import { BigNumberish } from "ethers";
 
 export default {
   title: "Visual Components/CTA/funds/WithdrawFundsButton",
@@ -52,10 +52,7 @@ Simple.args = {
   tokensToWithdraw: [
     {
       address: "",
-      amount: {
-        type: "BigNumber",
-        hex: ""
-      } as unknown as BigNumberish
+      amount: BigNumber.from(0)
     }
   ],
   disabled: false,

package/src/stories/searchBar/SearchBar.stories.tsx

@@ -1,6 +1,7 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 
+import { EnvironmentType, getEnvConfigs } from "@bosonprotocol/core-sdk";
 import { SearchBar } from "../../components/searchBar/SearchBar";
 
 export default {
@@ -13,8 +14,11 @@ const Template: ComponentStory<typeof SearchBar> = (args) => (
 );
 
 export const Primary: ComponentStory<typeof SearchBar> = Template.bind({});
-
+const envName =
+  (process.env.STORYBOOK_DATA_ENV_NAME as EnvironmentType) || "testing";
+const envConfig = getEnvConfigs(envName);
 Primary.args = {
   disabled: false,
-  envName: "testing"
+  envName,
+  configId: envConfig[0].configId
 };