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

package/src/components/cta/offer/CreateOfferButton.tsx

@@ -10,6 +10,7 @@ import { 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";
 
 type Props = {
   hasSellerAccount: boolean;
@@ -20,45 +21,70 @@ type Props = {
   offerIdData: string[] | string;
 }>;
 
-export const CreateOfferButton = ({
-  disabled = false,
-  showLoading = false,
-  extraInfo = "",
-  children,
-  onPendingSignature,
-  onPendingTransaction,
-  onSuccess,
-  onError,
-  waitBlocks = 1,
-  size = ButtonSize.Large,
-  variant = "primaryFill",
-  isMultiVariant,
-  hasSellerAccount,
-  sellerInfo,
-  offersToCreate,
-  coreSdkConfig,
-  ...rest
-}: Props) => {
-  const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
-  const { isMetaTx, signerAddress } = useMetaTx(coreSdk);
+export const CreateOfferButton = withQueryClientProvider(
+  ({
+    disabled = false,
+    showLoading = false,
+    extraInfo = "",
+    children,
+    onPendingSignature,
+    onPendingTransaction,
+    onSuccess,
+    onError,
+    waitBlocks = 1,
+    size = ButtonSize.Large,
+    variant = "primaryFill",
+    isMultiVariant,
+    hasSellerAccount,
+    sellerInfo,
+    offersToCreate,
+    coreSdkConfig,
+    ...rest
+  }: Props) => {
+    const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
+    const { isMetaTx, signerAddress } = useMetaTx(coreSdk);
 
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const handleCreateOffer = async () => {
-    if (!isLoading) {
-      let txResponse: TransactionResponse | undefined = undefined;
-      try {
-        setIsLoading(true);
-        onPendingSignature?.();
-        const seller = signerAddress && sellerInfo ? sellerInfo : null;
-        if (isMultiVariant) {
-          if (!hasSellerAccount && seller) {
+    const handleCreateOffer = async () => {
+      if (!isLoading) {
+        let txResponse: TransactionResponse | undefined = undefined;
+        try {
+          setIsLoading(true);
+          onPendingSignature?.();
+          const seller = signerAddress && sellerInfo ? sellerInfo : null;
+          if (isMultiVariant) {
+            if (!hasSellerAccount && seller) {
+              if (isMetaTx) {
+                // createSeller with meta-transaction
+                const nonce = Date.now();
+                const { r, s, v, functionName, functionSignature } =
+                  await coreSdk.signMetaTxCreateSeller({
+                    createSellerArgs: seller,
+                    nonce
+                  });
+                txResponse = await coreSdk.relayMetaTransaction({
+                  functionName,
+                  functionSignature,
+                  sigR: r,
+                  sigS: s,
+                  sigV: v,
+                  nonce
+                });
+              } else {
+                txResponse = await coreSdk.createSeller(seller);
+              }
+              onPendingTransaction?.(txResponse.hash, isMetaTx);
+
+              await txResponse.wait(waitBlocks);
+              onPendingSignature?.();
+            }
             if (isMetaTx) {
-              // createSeller with meta-transaction
+              // createOfferBatch with meta-transaction
               const nonce = Date.now();
               const { r, s, v, functionName, functionSignature } =
-                await coreSdk.signMetaTxCreateSeller({
-                  createSellerArgs: seller,
+                await coreSdk.signMetaTxCreateOfferBatch({
+                  createOffersArgs: offersToCreate,
                   nonce
                 });
               txResponse = await coreSdk.relayMetaTransaction({
@@ -70,52 +96,49 @@ export const CreateOfferButton = ({
                 nonce
               });
             } else {
-              txResponse = await coreSdk.createSeller(seller);
+              txResponse = await coreSdk.createOfferBatch(offersToCreate);
             }
             onPendingTransaction?.(txResponse.hash, isMetaTx);
 
-            await txResponse.wait(waitBlocks);
-            onPendingSignature?.();
-          }
-          if (isMetaTx) {
-            // createOfferBatch with meta-transaction
-            const nonce = Date.now();
-            const { r, s, v, functionName, functionSignature } =
-              await coreSdk.signMetaTxCreateOfferBatch({
-                createOffersArgs: offersToCreate,
-                nonce
-              });
-            txResponse = await coreSdk.relayMetaTransaction({
-              functionName,
-              functionSignature,
-              sigR: r,
-              sigS: s,
-              sigV: v,
-              nonce
+            const txReceipt = await txResponse.wait(waitBlocks);
+            const offerIds = coreSdk.getCreatedOfferIdsFromLogs(txReceipt.logs);
+            onSuccess?.(txReceipt as providers.TransactionReceipt, {
+              offerIdData: offerIds
             });
           } else {
-            txResponse = await coreSdk.createOfferBatch(offersToCreate);
-          }
-          onPendingTransaction?.(txResponse.hash, isMetaTx);
-
-          const txReceipt = await txResponse.wait(waitBlocks);
-          const offerIds = coreSdk.getCreatedOfferIdsFromLogs(txReceipt.logs);
-          onSuccess?.(txReceipt as providers.TransactionReceipt, {
-            offerIdData: offerIds
-          });
-        } else {
-          const [offerData] = offersToCreate;
-          if (isMetaTx) {
-            // meta-transaction
-            if (!hasSellerAccount && seller) {
-              // createSeller with meta-transaction
+            const [offerData] = offersToCreate;
+            if (isMetaTx) {
+              // meta-transaction
+              if (!hasSellerAccount && seller) {
+                // createSeller with meta-transaction
+                const nonce = Date.now();
+                const { r, s, v, functionName, functionSignature } =
+                  await coreSdk.signMetaTxCreateSeller({
+                    createSellerArgs: seller,
+                    nonce
+                  });
+                const createSellerResponse = await coreSdk.relayMetaTransaction(
+                  {
+                    functionName,
+                    functionSignature,
+                    sigR: r,
+                    sigS: s,
+                    sigV: v,
+                    nonce
+                  }
+                );
+                onPendingTransaction?.(createSellerResponse.hash, isMetaTx);
+                await createSellerResponse.wait(waitBlocks);
+                onPendingSignature?.();
+              }
+              // createOffer with meta-transaction
               const nonce = Date.now();
               const { r, s, v, functionName, functionSignature } =
-                await coreSdk.signMetaTxCreateSeller({
-                  createSellerArgs: seller,
+                await coreSdk.signMetaTxCreateOffer({
+                  createOfferArgs: offerData,
                   nonce
                 });
-              const createSellerResponse = await coreSdk.relayMetaTransaction({
+              txResponse = await coreSdk.relayMetaTransaction({
                 functionName,
                 functionSignature,
                 sigR: r,
@@ -123,71 +146,53 @@ export const CreateOfferButton = ({
                 sigV: v,
                 nonce
               });
-              onPendingTransaction?.(createSellerResponse.hash, isMetaTx);
-              await createSellerResponse.wait(waitBlocks);
-              onPendingSignature?.();
+            } else {
+              txResponse =
+                !hasSellerAccount && seller
+                  ? await coreSdk.createSellerAndOffer(seller, offerData)
+                  : await coreSdk.createOffer(offerData);
             }
-            // createOffer with meta-transaction
-            const nonce = Date.now();
-            const { r, s, v, functionName, functionSignature } =
-              await coreSdk.signMetaTxCreateOffer({
-                createOfferArgs: offerData,
-                nonce
-              });
-            txResponse = await coreSdk.relayMetaTransaction({
-              functionName,
-              functionSignature,
-              sigR: r,
-              sigS: s,
-              sigV: v,
-              nonce
+            onPendingTransaction?.(txResponse.hash, isMetaTx);
+
+            const txReceipt = await txResponse.wait(waitBlocks);
+            const offerId = coreSdk.getCreatedOfferIdFromLogs(txReceipt.logs);
+            onSuccess?.(txReceipt as providers.TransactionReceipt, {
+              offerIdData: offerId || ""
             });
-          } else {
-            txResponse =
-              !hasSellerAccount && seller
-                ? await coreSdk.createSellerAndOffer(seller, offerData)
-                : await coreSdk.createOffer(offerData);
           }
-          onPendingTransaction?.(txResponse.hash, isMetaTx);
-
-          const txReceipt = await txResponse.wait(waitBlocks);
-          const offerId = coreSdk.getCreatedOfferIdFromLogs(txReceipt.logs);
-          onSuccess?.(txReceipt as providers.TransactionReceipt, {
-            offerIdData: offerId || ""
+        } catch (error) {
+          onError?.(error as Error, {
+            txResponse: txResponse as providers.TransactionResponse
           });
+        } finally {
+          setIsLoading(false);
         }
-      } catch (error) {
-        onError?.(error as Error, {
-          txResponse: txResponse as providers.TransactionResponse
-        });
-      } finally {
-        setIsLoading(false);
       }
-    }
-  };
+    };
 
-  return (
-    <Button
-      variant={variant}
-      size={size}
-      disabled={disabled}
-      onClick={handleCreateOffer}
-      {...rest}
-    >
-      <ButtonTextWrapper>
-        {children || "Create offer"}
-        {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
-          <ExtraInfo>{extraInfo}</ExtraInfo>
-        ) : (
-          <>
-            {isLoading && showLoading && (
-              <LoadingWrapper>
-                <Loading />
-              </LoadingWrapper>
-            )}
-          </>
-        )}
-      </ButtonTextWrapper>
-    </Button>
-  );
-};
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        onClick={handleCreateOffer}
+        {...rest}
+      >
+        <ButtonTextWrapper>
+          {children || "Create offer"}
+          {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
+            <ExtraInfo>{extraInfo}</ExtraInfo>
+          ) : (
+            <>
+              {isLoading && showLoading && (
+                <LoadingWrapper>
+                  <Loading />
+                </LoadingWrapper>
+              )}
+            </>
+          )}
+        </ButtonTextWrapper>
+      </Button>
+    );
+  }
+);

package/src/components/cta/offer/VoidButton.tsx

@@ -9,6 +9,7 @@ import { Loading } from "../../Loading";
 import { ButtonSize } from "../../ui/buttonSize";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
 import { useMetaTx } from "../../../hooks/useMetaTx";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type Props = {
   /**
@@ -19,89 +20,91 @@ type Props = {
   offerId: BigNumberish;
 }>;
 
-export const VoidButton = ({
-  offerId,
-  disabled = false,
-  showLoading = false,
-  extraInfo,
-  onSuccess,
-  onError,
-  onPendingSignature,
-  onPendingTransaction,
-  waitBlocks = 1,
-  size = ButtonSize.Large,
-  variant = "secondaryFill",
-  children,
-  coreSdkConfig,
-  ...rest
-}: Props) => {
-  const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+export const VoidButton = withQueryClientProvider(
+  ({
+    offerId,
+    disabled = false,
+    showLoading = false,
+    extraInfo,
+    onSuccess,
+    onError,
+    onPendingSignature,
+    onPendingTransaction,
+    waitBlocks = 1,
+    size = ButtonSize.Large,
+    variant = "secondaryFill",
+    children,
+    coreSdkConfig,
+    ...rest
+  }: Props) => {
+    const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
+    const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const { isMetaTx } = useMetaTx(coreSdk);
+    const { isMetaTx } = useMetaTx(coreSdk);
 
-  return (
-    <Button
-      variant={variant}
-      disabled={disabled}
-      size={size}
-      onClick={async () => {
-        if (!isLoading) {
-          let txResponse: TransactionResponse | undefined = undefined;
-          try {
-            setIsLoading(true);
-            onPendingSignature?.();
+    return (
+      <Button
+        variant={variant}
+        disabled={disabled}
+        size={size}
+        onClick={async () => {
+          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.signMetaTxVoidOffer({
-                  offerId,
+                const { r, s, v, functionName, functionSignature } =
+                  await coreSdk.signMetaTxVoidOffer({
+                    offerId,
+                    nonce
+                  });
+
+                txResponse = await coreSdk.relayMetaTransaction({
+                  functionName,
+                  functionSignature,
+                  sigR: r,
+                  sigS: s,
+                  sigV: v,
                   nonce
                 });
+              } else {
+                txResponse = await coreSdk.voidOffer(offerId);
+              }
+
+              onPendingTransaction?.(txResponse.hash, isMetaTx);
+              const receipt = await txResponse.wait(waitBlocks);
 
-              txResponse = await coreSdk.relayMetaTransaction({
-                functionName,
-                functionSignature,
-                sigR: r,
-                sigS: s,
-                sigV: v,
-                nonce
+              onSuccess?.(receipt as providers.TransactionReceipt, { offerId });
+            } catch (error) {
+              onError?.(error as Error, {
+                txResponse: txResponse as providers.TransactionResponse
               });
-            } else {
-              txResponse = await coreSdk.voidOffer(offerId);
+            } finally {
+              setIsLoading(false);
             }
-
-            onPendingTransaction?.(txResponse.hash, isMetaTx);
-            const receipt = await txResponse.wait(waitBlocks);
-
-            onSuccess?.(receipt as providers.TransactionReceipt, { offerId });
-          } catch (error) {
-            onError?.(error as Error, {
-              txResponse: txResponse as providers.TransactionResponse
-            });
-          } finally {
-            setIsLoading(false);
           }
-        }
-      }}
-      {...rest}
-    >
-      <ButtonTextWrapper>
-        {children || "Void"}
-        {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
-          <ExtraInfo>{extraInfo}</ExtraInfo>
-        ) : (
-          <>
-            {isLoading && showLoading && (
-              <LoadingWrapper>
-                <Loading />
-              </LoadingWrapper>
-            )}
-          </>
-        )}
-      </ButtonTextWrapper>
-    </Button>
-  );
-};
+        }}
+        {...rest}
+      >
+        <ButtonTextWrapper>
+          {children || "Void"}
+          {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
+            <ExtraInfo>{extraInfo}</ExtraInfo>
+          ) : (
+            <>
+              {isLoading && showLoading && (
+                <LoadingWrapper>
+                  <Loading />
+                </LoadingWrapper>
+              )}
+            </>
+          )}
+        </ButtonTextWrapper>
+      </Button>
+    );
+  }
+);

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>
+    );
+  }
+);