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

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

@@ -6,6 +6,7 @@ import { CtaButton } from "../common/CtaButton";
 import { TransactionReceipt } from "@bosonprotocol/common";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
 import { useMetaTx } from "../../../hooks/useMetaTx";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type AdditionalProps = {
   accountId: string;
@@ -20,48 +21,50 @@ type SuccessPayload = TransactionReceipt;
 export type IWithdrawFundsButton = AdditionalProps &
   CtaButtonProps<SuccessPayload>;
 
-export const WithdrawFundsButton = ({
-  accountId,
-  variant = "primaryFill",
-  tokensToWithdraw,
-  ...restProps
-}: IWithdrawFundsButton) => {
-  const coreSdk = useCoreSdkOverrides({
-    coreSdkConfig: restProps.coreSdkConfig
-  });
-  const { isMetaTx } = useMetaTx(coreSdk);
-  const tokenList = useMemo(
-    () => tokensToWithdraw.map((t) => t.address),
-    [tokensToWithdraw]
-  );
-  const tokenAmounts = useMemo(
-    () => tokensToWithdraw.map((t) => BigNumber.from(t.amount).toString()),
-    [tokensToWithdraw]
-  );
-  const actions = [
-    // Withdraw funds
-    {
-      writeContractFn: () => {
-        return coreSdk.withdrawFunds(accountId, tokenList, tokenAmounts);
-      },
-      signMetaTxFn: async () =>
-        coreSdk.signMetaTxWithdrawFunds({
-          entityId: accountId,
-          tokenList,
-          tokenAmounts,
-          nonce: Date.now()
-        }),
-      additionalMetaTxCondition: isMetaTx
-    }
-  ];
+export const WithdrawFundsButton = withQueryClientProvider(
+  ({
+    accountId,
+    variant = "primaryFill",
+    tokensToWithdraw,
+    ...restProps
+  }: IWithdrawFundsButton) => {
+    const coreSdk = useCoreSdkOverrides({
+      coreSdkConfig: restProps.coreSdkConfig
+    });
+    const { isMetaTx } = useMetaTx(coreSdk);
+    const tokenList = useMemo(
+      () => tokensToWithdraw.map((t) => t.address),
+      [tokensToWithdraw]
+    );
+    const tokenAmounts = useMemo(
+      () => tokensToWithdraw.map((t) => BigNumber.from(t.amount).toString()),
+      [tokensToWithdraw]
+    );
+    const actions = [
+      // Withdraw funds
+      {
+        writeContractFn: () => {
+          return coreSdk.withdrawFunds(accountId, tokenList, tokenAmounts);
+        },
+        signMetaTxFn: async () =>
+          coreSdk.signMetaTxWithdrawFunds({
+            entityId: accountId,
+            tokenList,
+            tokenAmounts,
+            nonce: Date.now()
+          }),
+        additionalMetaTxCondition: isMetaTx
+      }
+    ];
 
-  return (
-    <CtaButton
-      variant={variant}
-      defaultLabel="Withdraw"
-      successPayload={(receipt) => receipt}
-      actions={actions}
-      {...restProps}
-    />
-  );
-};
+    return (
+      <CtaButton
+        variant={variant}
+        defaultLabel="Withdraw"
+        successPayload={(receipt) => receipt}
+        actions={actions}
+        {...restProps}
+      />
+    );
+  }
+);

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

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

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

@@ -7,6 +7,7 @@ import { useSignerAddress } from "../../../hooks/useSignerAddress";
 import { CtaButton } from "../common/CtaButton";
 import { CtaButtonProps } from "../common/types";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type AdditionalProps = {
   /**
@@ -27,75 +28,78 @@ type SuccessPayload = {
 
 type Props = AdditionalProps & CtaButtonProps<SuccessPayload>;
 
-export const CommitButton = ({
-  offerId,
-  exchangeToken,
-  price,
-  isPauseCommitting = false,
-  variant = "primaryFill",
-  onGetSignerAddress,
-  ...restProps
-}: Props) => {
-  const coreSdk = useCoreSdkOverrides({
-    coreSdkConfig: restProps.coreSdkConfig
-  });
-  const { signerAddress } = useSignerAddress(coreSdk.web3Lib);
+export const CommitButton = withQueryClientProvider(
+  ({
+    offerId,
+    exchangeToken,
+    price,
+    isPauseCommitting = false,
+    variant = "primaryFill",
+    onGetSignerAddress,
+    ...restProps
+  }: Props) => {
+    const coreSdk = useCoreSdkOverrides({
+      coreSdkConfig: restProps.coreSdkConfig
+    });
+    const { signerAddress } = useSignerAddress(coreSdk.web3Lib);
 
-  useEffect(() => {
-    if (onGetSignerAddress) {
-      onGetSignerAddress(signerAddress);
-    }
-  }, [signerAddress, onGetSignerAddress]);
+    useEffect(() => {
+      if (onGetSignerAddress) {
+        onGetSignerAddress(signerAddress);
+      }
+    }, [signerAddress, onGetSignerAddress]);
 
-  const actions: Action[] = [
-    // Approve exchange token action
-    {
-      name: "approveExchangeToken",
-      writeContractFn: () => coreSdk.approveExchangeToken(exchangeToken, price),
-      nativeMetaTxContract: exchangeToken,
-      signMetaTxFn: () =>
-        coreSdk.signNativeMetaTxApproveExchangeToken(exchangeToken, price),
-      additionalMetaTxCondition: coreSdk.checkMetaTxConfigSet({
-        contractAddress: exchangeToken
-      }),
-      shouldActionRun: async () => {
-        // only approve exchange token if
-        // - erc20 token
-        // - insufficient allowance of protocol
-        if (exchangeToken === AddressZero) {
-          return false;
+    const actions: Action[] = [
+      // Approve exchange token action
+      {
+        name: "approveExchangeToken",
+        writeContractFn: () =>
+          coreSdk.approveExchangeToken(exchangeToken, price),
+        nativeMetaTxContract: exchangeToken,
+        signMetaTxFn: () =>
+          coreSdk.signNativeMetaTxApproveExchangeToken(exchangeToken, price),
+        additionalMetaTxCondition: coreSdk.checkMetaTxConfigSet({
+          contractAddress: exchangeToken
+        }),
+        shouldActionRun: async () => {
+          // only approve exchange token if
+          // - erc20 token
+          // - insufficient allowance of protocol
+          if (exchangeToken === AddressZero) {
+            return false;
+          }
+          const currentAllowance = await coreSdk.getProtocolAllowance(
+            exchangeToken
+          );
+          return BigNumber.from(currentAllowance).lt(price);
         }
-        const currentAllowance = await coreSdk.getProtocolAllowance(
-          exchangeToken
-        );
-        return BigNumber.from(currentAllowance).lt(price);
+      },
+      // Commit action
+      {
+        name: "commit",
+        writeContractFn: () => coreSdk.commitToOffer(offerId),
+        signMetaTxFn: () =>
+          coreSdk.signMetaTxCommitToOffer({
+            offerId,
+            nonce: Date.now()
+          }),
+        additionalMetaTxCondition:
+          exchangeToken !== AddressZero || BigNumber.from(price).eq(0)
       }
-    },
-    // Commit action
-    {
-      name: "commit",
-      writeContractFn: () => coreSdk.commitToOffer(offerId),
-      signMetaTxFn: () =>
-        coreSdk.signMetaTxCommitToOffer({
-          offerId,
-          nonce: Date.now()
-        }),
-      additionalMetaTxCondition:
-        exchangeToken !== AddressZero || BigNumber.from(price).eq(0)
-    }
-  ];
+    ];
 
-  return (
-    <CtaButton
-      variant={variant}
-      defaultLabel="Commit"
-      successPayload={(receipt) => ({
-        exchangeId: coreSdk.getCommittedExchangeIdFromLogs(
-          receipt.logs
-        ) as string
-      })}
-      actions={actions}
-      {...restProps}
-    />
-  );
-};
+    return (
+      <CtaButton
+        variant={variant}
+        defaultLabel="Commit"
+        successPayload={(receipt) => ({
+          exchangeId: coreSdk.getCommittedExchangeIdFromLogs(
+            receipt.logs
+          ) as string
+        })}
+        actions={actions}
+        {...restProps}
+      />
+    );
+  }
+);