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

package/src/components/wallet2/walletModal/Option.tsx

@@ -110,6 +110,9 @@ export interface OptionProps {
   hoverColor: CSSProperties["color"];
   backgroundColor: CSSProperties["backgroundColor"];
   borderRadius: CSSProperties["borderRadius"];
+  onOptionClick?: (arg0: {
+    activationState: ReturnType<typeof useActivationState>["activationState"];
+  }) => void;
 }
 export function Option({
   connection,
@@ -117,7 +120,8 @@ export function Option({
   hoverFocusBackgroundColor,
   hoverColor,
   backgroundColor,
-  borderRadius
+  borderRadius,
+  onOptionClick
 }: OptionProps) {
   const { activationState, tryActivation } = useActivationState();
   const toggleAccountDrawer = useToggleAccountDrawer();
@@ -139,7 +143,10 @@ export function Option({
     >
       <OptionCardClickable
         disabled={isSomeOptionPending}
-        onClick={activate}
+        onClick={() => {
+          activate();
+          onOptionClick?.({ activationState });
+        }}
         selected={isCurrentOptionPending}
         data-testid={`wallet-option-${connection.type}`}
       >

package/src/components/wallet2/walletModal/index.tsx

@@ -47,6 +47,7 @@ export type WalletModalProps = {
     | "hoverColor"
     | "backgroundColor"
     | "borderRadius"
+    | "onOptionClick"
   > & { iconBorderRadius: CSSProperties["borderRadius"] };
 };
 export function WalletModal({

package/src/components/wallet2/web3Status/index.tsx

@@ -1,5 +1,5 @@
 import { useWeb3React } from "@web3-react/core";
-import React, { memo, useCallback, useEffect, useRef } from "react";
+import React, { ReactNode, memo, useCallback, useEffect, useRef } from "react";
 import styled from "styled-components";
 
 import { useIsMagicLoggedIn } from "../../../hooks";
@@ -64,7 +64,17 @@ const getCommonWalletButtonProps = (isXXS: boolean) =>
 function Web3StatusInner({
   showOnlyIcon,
   errorButtonTheme,
-  successButtonTheme
+  connectedButtonTheme,
+  connectWalletButtonTheme,
+  connectWalletChild = <>Connect Wallet</>,
+  showStatusIcon = true,
+  wrongNetworkChild = <>Wrong network</>,
+  leftConnectWalletChild,
+  leftConnectedChild,
+  leftWrongNetworkChild,
+  rightConnectWalletChild,
+  rightConnectedChild,
+  rightWrongNetworkChild
 }: ConnectWalletProps) {
   const switchingChain = useAppSelector(
     (state) => state.wallets.switchingChain
@@ -121,18 +131,21 @@ function Web3StatusInner({
         disabled={Boolean(switchingChain)}
         data-testid="web3-status-connected"
         onClick={handleWalletDropdownClick}
-        theme={successButtonTheme}
+        theme={connectedButtonTheme}
       >
-        <StatusIcon
-          account={account}
-          size={24}
-          connection={connection}
-          showMiniIcons={showOnlyIcon}
-        />
-
+        {showStatusIcon && (
+          <StatusIcon
+            account={account}
+            size={24}
+            connection={connection}
+            showMiniIcons={showOnlyIcon}
+          />
+        )}
+        {leftConnectedChild}
         <AddressAndChevronContainer>
           <Text>{ENSName || formatAddress(account)}</Text>
         </AddressAndChevronContainer>
+        {rightConnectedChild}
       </BaseButton>
     );
   }
@@ -163,7 +176,9 @@ function Web3StatusInner({
             onClick={handleWalletDropdownClick}
             theme={errorButtonTheme}
           >
-            Wrong network
+            {leftWrongNetworkChild}
+            {wrongNetworkChild}
+            {rightWrongNetworkChild}
           </BaseButton>
         </Tooltip>
       ) : (
@@ -171,23 +186,36 @@ function Web3StatusInner({
           onClick={handleWalletDropdownClick}
           data-testid="navbar-connect-wallet"
           {...getCommonWalletButtonProps(isXXS)}
-          theme={successButtonTheme}
+          theme={connectWalletButtonTheme}
           style={{
             ...getCommonWalletButtonProps(isXXS).style
           }}
         >
-          Connect Wallet
+          {leftConnectWalletChild}
+          {connectWalletChild}
+          {rightConnectWalletChild}
         </BaseButton>
       )}
     </Grid>
   );
 }
+type SuccessButtonTheme = Omit<BaseButtonTheme, "color" | "background"> &
+  Required<Pick<BaseButtonTheme, "color" | "background">>;
 
 export type ConnectWalletProps = {
   showOnlyIcon?: boolean;
   errorButtonTheme: BaseButtonTheme;
-  successButtonTheme: Omit<BaseButtonTheme, "color" | "background"> &
-    Required<Pick<BaseButtonTheme, "color" | "background">>;
+  connectedButtonTheme: SuccessButtonTheme;
+  connectWalletButtonTheme: SuccessButtonTheme;
+  connectWalletChild?: ReactNode;
+  wrongNetworkChild?: ReactNode;
+  showStatusIcon?: boolean;
+  leftConnectedChild?: ReactNode;
+  rightConnectedChild?: ReactNode;
+  leftWrongNetworkChild?: ReactNode;
+  rightWrongNetworkChild?: ReactNode;
+  leftConnectWalletChild?: ReactNode;
+  rightConnectWalletChild?: ReactNode;
 };
 export const ConnectWallet = memo(function Web3Status(
   props: ConnectWalletProps

package/src/hooks/index.ts

@@ -25,3 +25,13 @@ export * from "./ipfs/useIpfsStorage";
 export * from "./location/buildUseSearchParams";
 export * from "./form/useForm";
 export * from "./useBreakpoints";
+export * from "./useSignerAddress";
+export * from "./useMetaTx";
+export { useCtaClickHandler } from "./useCtaClickHandler";
+export {
+  useToggleAccountDrawer,
+  useAccountDrawer,
+  useCloseAccountDrawer,
+  useOpenAccountDrawer
+} from "../components/wallet2/accountDrawer/index";
+export * from "./usePrevious";

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