@bosonprotocol/react-kit 0.29.0-alpha.2 → 0.29.0-alpha.4

package/src/components/cta/seller/CreateSellerButton.tsx

@@ -9,6 +9,7 @@ import { CreateSellerArgs, TransactionResponse } from "@bosonprotocol/common";
 import { ButtonSize } from "../../ui/buttonSize";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
 import { useMetaTx } from "../../../hooks/useMetaTx";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 export type ICreateSellerButton = {
   exchangeId: BigNumberish;
   createSellerArgs: CreateSellerArgs;
@@ -16,93 +17,95 @@ export type ICreateSellerButton = {
   exchangeId: BigNumberish;
 }>;
 
-export const CreateSellerButton = ({
-  exchangeId,
-  disabled = false,
-  showLoading = false,
-  extraInfo,
-  onSuccess,
-  onError,
-  onPendingSignature,
-  onPendingTransaction,
-  waitBlocks = 1,
-  children,
-  size = ButtonSize.Large,
-  variant = "accentInverted",
-  createSellerArgs,
-  coreSdkConfig,
-  ...rest
-}: ICreateSellerButton) => {
-  const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+export const CreateSellerButton = withQueryClientProvider(
+  ({
+    exchangeId,
+    disabled = false,
+    showLoading = false,
+    extraInfo,
+    onSuccess,
+    onError,
+    onPendingSignature,
+    onPendingTransaction,
+    waitBlocks = 1,
+    children,
+    size = ButtonSize.Large,
+    variant = "accentInverted",
+    createSellerArgs,
+    coreSdkConfig,
+    ...rest
+  }: ICreateSellerButton) => {
+    const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
+    const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const { isMetaTx } = useMetaTx(coreSdk);
+    const { isMetaTx } = useMetaTx(coreSdk);
 
-  return (
-    <Button
-      variant={variant}
-      size={size}
-      disabled={disabled}
-      onClick={async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        e.stopPropagation();
-        if (!isLoading) {
-          let txResponse: TransactionResponse | undefined = undefined;
-          try {
-            setIsLoading(true);
-            onPendingSignature?.();
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        onClick={async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          e.stopPropagation();
+          if (!isLoading) {
+            let txResponse: TransactionResponse | undefined = undefined;
+            try {
+              setIsLoading(true);
+              onPendingSignature?.();
 
-            if (isMetaTx) {
-              const nonce = Date.now();
+              if (isMetaTx) {
+                const nonce = Date.now();
 
-              const { r, s, v, functionName, functionSignature } =
-                await coreSdk.signMetaTxCreateSeller({
-                  createSellerArgs,
+                const { r, s, v, functionName, functionSignature } =
+                  await coreSdk.signMetaTxCreateSeller({
+                    createSellerArgs,
+                    nonce
+                  });
+
+                txResponse = await coreSdk.relayMetaTransaction({
+                  functionName,
+                  functionSignature,
+                  sigR: r,
+                  sigS: s,
+                  sigV: v,
                   nonce
                 });
+              } else {
+                txResponse = await coreSdk.createSeller(createSellerArgs);
+              }
+
+              onPendingTransaction?.(txResponse.hash);
+              const receipt = await txResponse.wait(waitBlocks);
 
-              txResponse = await coreSdk.relayMetaTransaction({
-                functionName,
-                functionSignature,
-                sigR: r,
-                sigS: s,
-                sigV: v,
-                nonce
+              onSuccess?.(receipt as providers.TransactionReceipt, {
+                exchangeId
+              });
+            } catch (error) {
+              onError?.(error as Error, {
+                txResponse: txResponse as providers.TransactionResponse
               });
-            } else {
-              txResponse = await coreSdk.createSeller(createSellerArgs);
+            } finally {
+              setIsLoading(false);
             }
-
-            onPendingTransaction?.(txResponse.hash);
-            const receipt = await txResponse.wait(waitBlocks);
-
-            onSuccess?.(receipt as providers.TransactionReceipt, {
-              exchangeId
-            });
-          } catch (error) {
-            onError?.(error as Error, {
-              txResponse: txResponse as providers.TransactionResponse
-            });
-          } finally {
-            setIsLoading(false);
           }
-        }
-      }}
-      {...rest}
-    >
-      <ButtonTextWrapper>
-        {children || "Create Seller"}
-        {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
-          <ExtraInfo>{extraInfo}</ExtraInfo>
-        ) : (
-          <>
-            {isLoading && showLoading && (
-              <LoadingWrapper>
-                <Loading />
-              </LoadingWrapper>
-            )}
-          </>
-        )}
-      </ButtonTextWrapper>
-    </Button>
-  );
-};
+        }}
+        {...rest}
+      >
+        <ButtonTextWrapper>
+          {children || "Create Seller"}
+          {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
+            <ExtraInfo>{extraInfo}</ExtraInfo>
+          ) : (
+            <>
+              {isLoading && showLoading && (
+                <LoadingWrapper>
+                  <Loading />
+                </LoadingWrapper>
+              )}
+            </>
+          )}
+        </ButtonTextWrapper>
+      </Button>
+    );
+  }
+);

package/src/components/modal/components/Commit/DetailView/ExternalCommitDetailView.tsx

@@ -8,12 +8,15 @@ import {
   CommitDetailViewWithProviderProps
 } from "./CommitDetailViewWithProvider";
 import { ResetStylesForNonWidgets } from "../../../../styles/ResetStylesForNonWidgets";
+export {
+  CommitWidgetReduxProvider,
+  CommitWidgetReduxUpdaters
+} from "../../../../widgets/commit/CommitWidgetProviders";
 
 export type ExternalCommitDetailViewProps =
   CommitDetailViewWithProviderProps & {
     providerProps: Omit<CommitWidgetProvidersProps, "children">;
   };
-
 export const ExternalCommitDetailView: React.FC<
   ExternalCommitDetailViewProps
 > = (props) => {

package/src/components/queryClient/QueryClientProviderCustom.tsx

@@ -0,0 +1,27 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryClientProviderProps
+} from "react-query";
+
+import React from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+});
+
+type QueryClientProviderCustomProps = Partial<QueryClientProviderProps>;
+
+export const QueryClientProviderCustom: React.FC<
+  QueryClientProviderCustomProps
+> = ({ ...props }) => {
+  return (
+    <QueryClientProvider client={queryClient} {...props}>
+      {props.children}
+    </QueryClientProvider>
+  );
+};

package/src/components/queryClient/withQueryClientProvider.tsx

@@ -0,0 +1,50 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryClientProviderProps
+} from "react-query";
+
+import React from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+});
+
+type QueryClientProviderCustomProps = Partial<QueryClientProviderProps>;
+
+export const QueryClientProviderCustom: React.FC<
+  QueryClientProviderCustomProps
+> = ({ ...props }) => {
+  return (
+    <QueryClientProvider client={queryClient} {...props}>
+      {props.children}
+    </QueryClientProvider>
+  );
+};
+
+export const withQueryClientProvider = <P extends object>(
+  WrappedComponent: React.ComponentType<P>
+) => {
+  // Define the props type for the wrapped component
+  type Props = P;
+
+  // Return a new component
+  const WithQueryClientProvider: React.FC<Props> = (props) => {
+    return (
+      <QueryClientProviderCustom>
+        <WrappedComponent {...props} />
+      </QueryClientProviderCustom>
+    );
+  };
+
+  // Set display name for debugging purposes
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || "Component";
+  WithQueryClientProvider.displayName = `withQueryClientProviderCustom(${displayName})`;
+
+  return WithQueryClientProvider;
+};

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

@@ -8,6 +8,7 @@ import {
 } from "./CommitWidgetProviders";
 import GlobalStyle from "../../styles/GlobalStyle";
 import { CSSProperties } from "styled-components";
+import { useProvider } from "../../../hooks/connection/connection";
 type CommitProps = {
   buttonProps?: Omit<ButtonProps, "onClick">;
   trigger?: ComponentType<{ onClick: () => unknown }> | undefined;
@@ -31,7 +32,8 @@ type CommitProps = {
     lookAndFeel: "regular" | "modal";
     modalMargin?: CSSProperties["margin"];
   };
-export type CommitWidgetProps = CommitProps & CommitWidgetProvidersProps;
+export type CommitWidgetProps = CommitProps &
+  Omit<CommitWidgetProvidersProps, "withReduxProvider" | "provider">;
 export function CommitWidget(props: CommitWidgetProps) {
   const Container = useCallback(
     ({ children }: { children: ReactNode }) => {
@@ -45,9 +47,10 @@ export function CommitWidget(props: CommitWidgetProps) {
     // @ts-ignore
     [props.lookAndFeel, props.modalMargin]
   );
+
   return (
     <Container>
-      <CommitWidgetProviders {...props}>
+      <CommitWidgetProviders {...props} withReduxProvider>
         <GlobalStyle />
         <CommitModalWithOffer {...props} hideModal={props.closeWidgetClick} />
       </CommitWidgetProviders>

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useCallback } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { CONFIG } from "../../../lib/config/config";
 import ChatProvider from "../../chat/ChatProvider/ChatProvider";
@@ -15,43 +15,84 @@ import WalletConnectionProvider, {
 import ConvertionRateProvider, {
   ConvertionRateProviderProps
 } from "../finance/convertion-rate/ConvertionRateProvider";
-import { Updaters } from "../../../state/updaters";
+import { Updaters, UpdatersProps } from "../../../state/updaters";
 import { Provider } from "react-redux";
 import store from "../../../state";
+import { ReduxCCDummyContext } from "../../../state/reduxContext";
+import { useIsWindowVisible } from "../../../hooks/uniswap/useIsWindowVisible";
+import { useProvider } from "../../../hooks/connection/connection";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 export type CommitWidgetProvidersProps = IpfsProviderProps &
   Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
   ConvertionRateProviderProps &
   Omit<WalletConnectionProviderProps, "children" | "envName"> & {
     children: ReactNode;
+    withReduxProvider: boolean;
   };
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false
-    }
-  }
-});
 const { infuraKey, magicLinkKey } = CONFIG;
-
-export const CommitWidgetProviders: React.FC<CommitWidgetProvidersProps> = ({
-  children,
-  ...props
+export const CommitWidgetReduxProvider = ({
+  children
+}: {
+  children: ReactNode;
 }) => {
   return (
-    <Provider store={store}>
-      <ConfigProvider
-        magicLinkKey={magicLinkKey}
-        infuraKey={infuraKey}
-        {...props}
-      >
-        <MagicProvider>
-          <QueryClientProvider client={queryClient}>
+    // it doesnt matter what the initial value of the context is, hence the any cast
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <Provider store={store} context={ReduxCCDummyContext as any}>
+      {children}
+    </Provider>
+  );
+};
+export const CommitWidgetReduxUpdaters = ({
+  children,
+  ...rest
+}: UpdatersProps) => {
+  return <Updaters {...rest}>{children}</Updaters>;
+};
+
+export const CommitWidgetProviders: React.FC<CommitWidgetProvidersProps> =
+  withQueryClientProvider(({ children, withReduxProvider, ...props }) => {
+    const isWindowVisible = useIsWindowVisible();
+    const WithReduxProvider = useCallback(
+      ({ children: providersChildren }: { children: ReactNode }) => {
+        return withReduxProvider ? (
+          <CommitWidgetReduxProvider>
+            {providersChildren}
+          </CommitWidgetReduxProvider>
+        ) : (
+          <>{providersChildren}</>
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      },
+      [withReduxProvider]
+    );
+    const WithUpdaters = useCallback(
+      ({ children: updatersChildren }: { children: ReactNode }) => {
+        return withReduxProvider ? (
+          <UpdatersWrapper isWindowVisible={isWindowVisible}>
+            {updatersChildren}
+          </UpdatersWrapper>
+        ) : (
+          <>{updatersChildren}</>
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      },
+      [withReduxProvider, isWindowVisible]
+    );
+    return (
+      <WithReduxProvider>
+        <ConfigProvider
+          magicLinkKey={magicLinkKey}
+          infuraKey={infuraKey}
+          {...props}
+        >
+          <MagicProvider>
             <WalletConnectionProvider
               walletConnectProjectId={props.walletConnectProjectId}
             >
-              <Updaters>
+              <WithUpdaters>
                 <ChatProvider>
                   <IpfsProvider {...props}>
                     <ConvertionRateProvider>
@@ -59,11 +100,25 @@ export const CommitWidgetProviders: React.FC<CommitWidgetProvidersProps> = ({
                     </ConvertionRateProvider>
                   </IpfsProvider>
                 </ChatProvider>
-              </Updaters>
+              </WithUpdaters>
             </WalletConnectionProvider>
-          </QueryClientProvider>
-        </MagicProvider>
-      </ConfigProvider>
-    </Provider>
+          </MagicProvider>
+        </ConfigProvider>
+      </WithReduxProvider>
+    );
+  });
+
+function UpdatersWrapper({
+  children,
+  isWindowVisible
+}: {
+  children: ReactNode;
+  isWindowVisible: boolean;
+}) {
+  const provider = useProvider();
+  return (
+    <Updaters isWindowVisible={isWindowVisible} provider={provider}>
+      {children}
+    </Updaters>
   );
-};
+}

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

@@ -3,7 +3,6 @@ import isBetween from "dayjs/plugin/isBetween";
 
 import { ethers } from "ethers";
 import React, { useEffect, useMemo, useRef } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
 import styled from "styled-components";
 import { useAccount } from "../../../hooks/connection/connection";
 import { useDisconnect } from "../../../hooks/connection/useDisconnect";
@@ -33,6 +32,7 @@ import useFunds from "./useFunds";
 import { useOffersBacked } from "./useOffersBacked";
 import { useSellerDeposit } from "./useSellerDeposit";
 import { useSellerRoles } from "./useSellerRoles";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 dayjs.extend(isBetween);
 
 const StyledConnectButton = styled(ConnectButton)`
@@ -146,14 +146,6 @@ function WithSellerData(WrappedComponent: React.ComponentType<Props>) {
 }
 
 const Component = WithSellerData(Finance);
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false
-    }
-  }
-});
-
 type FinanceWidgetProps = {
   walletConnectProjectId: string;
 } & Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
@@ -182,18 +174,16 @@ export function FinanceWidget(props: FinanceWidgetProps) {
           <WalletConnectionProvider
             walletConnectProjectId={walletConnectProjectId}
           >
-            <QueryClientProvider client={queryClient}>
-              <ConvertionRateProvider>
-                <ModalProvider>
-                  {!withExternalSigner && (
-                    <Grid justifyContent="flex-end">
-                      <StyledConnectButton showChangeWallet />
-                    </Grid>
-                  )}
-                  <Component sellerId={sellerId ?? undefined} />
-                </ModalProvider>
-              </ConvertionRateProvider>
-            </QueryClientProvider>
+            <ConvertionRateProvider>
+              <ModalProvider>
+                {!withExternalSigner && (
+                  <Grid justifyContent="flex-end">
+                    <StyledConnectButton showChangeWallet />
+                  </Grid>
+                )}
+                <Component sellerId={sellerId ?? undefined} />
+              </ModalProvider>
+            </ConvertionRateProvider>
           </WalletConnectionProvider>
         </MagicProvider>
       </SignerProvider>
@@ -201,4 +191,4 @@ export function FinanceWidget(props: FinanceWidgetProps) {
   );
 }
 
-export default FinanceWidget;
+export default withQueryClientProvider(FinanceWidget);

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

@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
 import { CONFIG } from "../../../lib/config/config";
 import ChatProvider from "../../chat/ChatProvider/ChatProvider";
 import {
@@ -21,6 +20,7 @@ import ConvertionRateProvider, {
 import { CommonWidgetTypes } from "../types";
 import { RedemptionContextProps } from "./provider/RedemptionContext";
 import { RedemptionProvider } from "./provider/RedemptionProvider";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 export type RedemptionWidgetProvidersProps = IpfsProviderProps &
   Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
@@ -33,32 +33,23 @@ export type RedemptionWidgetProvidersProps = IpfsProviderProps &
     children: ReactNode;
   };
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false
-    }
-  }
-});
 const { infuraKey, magicLinkKey } = CONFIG;
 
-export const RedemptionWidgetProviders: React.FC<
-  RedemptionWidgetProvidersProps
-> = ({ children, ...props }) => {
-  const parentOrigin = getParentWindowOrigin();
-  return (
-    <ConfigProvider
-      magicLinkKey={magicLinkKey}
-      infuraKey={infuraKey}
-      {...props}
-    >
-      <GlobalStyle />
-      <SignerProvider
-        parentOrigin={parentOrigin}
-        withExternalSigner={props.withExternalSigner}
+export const RedemptionWidgetProviders: React.FC<RedemptionWidgetProvidersProps> =
+  withQueryClientProvider(({ children, ...props }) => {
+    const parentOrigin = getParentWindowOrigin();
+    return (
+      <ConfigProvider
+        magicLinkKey={magicLinkKey}
+        infuraKey={infuraKey}
+        {...props}
       >
-        <MagicProvider>
-          <QueryClientProvider client={queryClient}>
+        <GlobalStyle />
+        <SignerProvider
+          parentOrigin={parentOrigin}
+          withExternalSigner={props.withExternalSigner}
+        >
+          <MagicProvider>
             <WalletConnectionProvider
               walletConnectProjectId={props.walletConnectProjectId}
             >
@@ -74,9 +65,8 @@ export const RedemptionWidgetProviders: React.FC<
                 </IpfsProvider>
               </ChatProvider>
             </WalletConnectionProvider>
-          </QueryClientProvider>
-        </MagicProvider>
-      </SignerProvider>
-    </ConfigProvider>
-  );
-};
+          </MagicProvider>
+        </SignerProvider>
+      </ConfigProvider>
+    );
+  });

package/src/hooks/index.ts

@@ -16,3 +16,4 @@ export * from "./contracts/erc721/useErc721Name";
 export * from "./contracts/erc721/useErc721OwnerOf";
 export * from "./contracts/erc1155/useErc1155Name";
 export * from "./contracts/erc1155/useErc1155Uri";
+export * from "./uniswap/useIsWindowVisible";

package/src/hooks/uniswap/useIsWindowVisible.ts

@@ -11,7 +11,7 @@ function isWindowVisible() {
 /**
  * Returns whether the window is currently visible to the user.
  */
-export default function useIsWindowVisible(): boolean {
+export function useIsWindowVisible(): boolean {
   const [focused, setFocused] = useState<boolean>(false);
   const listener = useCallback(() => {
     setFocused(isWindowVisible());

package/src/hooks/useSignerAddress.tsx

@@ -1,35 +1,26 @@
 import { Web3LibAdapter } from "@bosonprotocol/common";
 
-import { useEffect, useState } from "react";
+import { useQuery } from "react-query";
 
 export function useSignerAddress(web3Lib: Web3LibAdapter | undefined) {
-  const [signerAddress, setSignerAddress] = useState<string | undefined>();
-  const [signerContract, setSignerContract] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (web3Lib?.getSignerAddress) {
-      web3Lib
-        .getSignerAddress()
-        .then((address) => {
-          setSignerAddress(address);
-        })
-        .catch((e) => {
-          console.error(e);
-          setSignerAddress(undefined);
-        });
-      web3Lib
-        .isSignerContract()
-        .then((isSignerContract) => {
-          setSignerContract(isSignerContract);
-        })
-        .catch((e) => {
-          console.error(e);
-          setSignerContract(false);
-        });
+  const { data: signerAddress } = useQuery(
+    ["useSignerAddress-signerAddress", web3Lib?.uuid],
+    () => {
+      return web3Lib?.getSignerAddress();
+    },
+    {
+      enabled: !!web3Lib?.getSignerAddress
     }
-
-    return () => setSignerAddress(undefined);
-  }, [web3Lib]);
+  );
+  const { data: signerContract } = useQuery(
+    ["useSignerAddress-signerContract", web3Lib?.uuid],
+    () => {
+      return web3Lib?.isSignerContract();
+    },
+    {
+      enabled: !!web3Lib?.getSignerAddress
+    }
+  );
 
   return { signerAddress, signerContract };
 }

package/src/lib/signer/externalSigner.ts

@@ -53,6 +53,7 @@ const getExternalWeb3LibAdapterListener = ({
   parentOrigin: string;
 }): Web3LibAdapter => {
   return {
+    uuid: crypto.randomUUID(),
     getSignerAddress: (): Promise<string> => {
       return getDefaultHandleSignerFunction<string>({
         parentOrigin,