@bosonprotocol/react-kit 0.34.0-alpha.1 → 0.34.0-alpha.10

package/src/hooks/useCtaClickHandler.ts

@@ -20,7 +20,10 @@ export function useCtaClickHandler<T>({
   successPayload
 }: {
   waitBlocks: number;
-  coreSdk: CoreSDK;
+  coreSdk: Pick<
+    CoreSDK,
+    "relayNativeMetaTransaction" | "relayMetaTransaction" | "parseError"
+  >;
   useMetaTx: boolean;
   actions: Action[];
   successPayload: T | ((receipt: providers.TransactionReceipt) => T);

package/src/hooks/useMetaTx.ts

@@ -1,7 +1,9 @@
 import { CoreSDK } from "@bosonprotocol/core-sdk";
 import { useSignerAddress } from "./useSignerAddress";
 
-export function useMetaTx(coreSdk: CoreSDK | undefined) {
+export function useMetaTx(
+  coreSdk: Pick<CoreSDK, "isMetaTxConfigSet" | "web3Lib"> | undefined
+) {
   const { signerAddress, signerContract } = useSignerAddress(coreSdk?.web3Lib);
   const isMetaTx = coreSdk
     ? Boolean(coreSdk.isMetaTxConfigSet && signerAddress && !signerContract)

package/src/index.tsx

@@ -3,6 +3,7 @@ export * from "./components/buttons/BurgerButton";
 export * from "./components/buttons/Button";
 export * from "./components/buttons/CommitButtonView";
 export * from "./components/config/ConfigProvider";
+export * from "./components/cta/common/types";
 export * from "./components/cta/dispute/DecideDisputeButton";
 export * from "./components/cta/dispute/EscalateDisputeButton";
 export * from "./components/cta/dispute/ExpireDisputeButton";
@@ -45,6 +46,8 @@ export * from "./components/modal/components/Redeem/DetailView/ExternalExchangeD
 export * from "./components/portal/Portal";
 export * from "./components/productCard/const";
 export * from "./components/productCard/ProductCard";
+export * from "./components/queryClient/withQueryClientProvider";
+export * from "./components/queryClient/QueryClientProviderCustom";
 export * from "./components/scroll/ScrollToID";
 export * from "./components/scroll/ScrollToTop";
 export * from "./components/searchBar/SearchBar";
@@ -85,6 +88,7 @@ export * from "./lib/magicLink/logout";
 export * from "./lib/magicLink/provider";
 export * from "./lib/offer/filter";
 export * from "./lib/offer/getIsOfferExpired";
+export * from "./lib/opensea/getOpenSeaUrl";
 export * from "./lib/promises/promises";
 export * from "./lib/url/url";
 export * from "./theme";

package/src/stories/ConnectWallet.stories.tsx

@@ -1,5 +1,5 @@
 import { fn } from "@storybook/test";
-import React from "react";
+import React, { ReactNode } from "react";
 import { Meta } from "@storybook/react";
 import {
   ChainSelector,
@@ -17,8 +17,9 @@ import {
 import { HashRouter, Route, Routes } from "react-router-dom";
 import { bosonButtonThemeKeys } from "../components/ui/ThemedButton";
 import { CSSProperties, createGlobalStyle } from "styled-components";
+import { Wallet } from "phosphor-react";
 const colors = theme.colors.light;
-const successButtonTheme: ConnectWalletProps["successButtonTheme"] = {
+const successButtonTheme: ConnectWalletProps["connectWalletButtonTheme"] = {
   ...bosonButtonThemes({ withBosonStyle: false })["primary"],
   color: "inherit",
   background: "var(--buttonBgColor)"
@@ -30,13 +31,17 @@ const errorButtonTheme = bosonButtonThemes({ withBosonStyle: false })[
 const envName =
   (process.env.STORYBOOK_DATA_ENV_NAME as EnvironmentType) || "testing";
 const envConfig = getEnvConfigs(envName);
-const configId = envConfig[0].configId;
+const config = envConfig[0];
+const configId = config.configId;
 const ColorGlobalStyle = createGlobalStyle<{ color: CSSProperties["color"] }>`
   html, body{
     color: ${({ color }) => color};
   }
 `;
 const Component = ({
+  showStatusIcon,
+  rightConnectedChild,
+  connectWalletChild,
   textColor,
   chainSelectorBackgroundColor,
   connectWalletBorderRadius,
@@ -58,7 +63,10 @@ const Component = ({
   magicLoginButtonBorderRadiusPx,
   onUserDisconnect
 }: {
+  showStatusIcon: boolean;
+  rightConnectedChild?: ReactNode;
   textColor: string;
+  connectWalletChild: string;
   chainSelectorBackgroundColor: string | undefined;
   connectWalletBorderRadius: string | undefined;
   connectWalletSuccessButtonThemeKey: string | undefined;
@@ -114,9 +122,22 @@ const Component = ({
                   <ChainSelector
                     leftAlign={true}
                     backgroundColor={chainSelectorBackgroundColor}
+                    config={config}
                   />
                   <ConnectWallet
-                    successButtonTheme={{
+                    showStatusIcon={showStatusIcon}
+                    connectWalletChild={connectWalletChild}
+                    rightConnectedChild={rightConnectedChild}
+                    connectWalletButtonTheme={{
+                      ...(connectWalletSuccessButtonThemeKey
+                        ? bosonButtonThemes({ withBosonStyle: false })[
+                            connectWalletSuccessButtonThemeKey
+                          ]
+                        : successButtonTheme),
+                      borderRadius: connectWalletBorderRadius,
+                      gap: "2px"
+                    }}
+                    connectedButtonTheme={{
                       ...(connectWalletSuccessButtonThemeKey
                         ? bosonButtonThemes({ withBosonStyle: false })[
                             connectWalletSuccessButtonThemeKey
@@ -283,6 +304,9 @@ export const CustomTheme = {
     walletHoverFocusBackgroundColor: "#e89f0e",
     walletHoverColor: "#ff0000",
     magicLoginButtonThemeKey: "orangeInverse",
-    magicLoginButtonBorderRadiusPx: "50"
+    magicLoginButtonBorderRadiusPx: "50",
+    showStatusIcon: false,
+    connectWalletChild: <>Connect</>,
+    rightConnectedChild: <Wallet />
   }
 };

package/src/stories/buttons/Upload.stories.tsx

@@ -1,11 +1,9 @@
-import { fn } from "@storybook/test";
 import React from "react";
 import { Meta } from "@storybook/react";
-import { Upload } from "../..";
+import { QueryClientProviderCustom, Upload } from "../..";
 import { EnvironmentProvider } from "../../components/environment/EnvironmentProvider";
 import { IpfsProvider } from "../../components/ipfs/IpfsProvider";
 import { Formik } from "formik";
-import { QueryClientProviderCustom } from "../../components/queryClient/withQueryClientProvider";
 import {
   bosonButtonThemeKeys,
   bosonButtonThemes