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

package/src/components/cta/exchange/BatchCompleteButton.tsx

@@ -4,6 +4,7 @@ import { BigNumberish } from "ethers";
 import { CtaButtonProps } from "../common/types";
 import { CtaButton } from "../common/CtaButton";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type AdditionalProps = {
   /**
@@ -18,33 +19,31 @@ type SuccessPayload = {
 
 type Props = AdditionalProps & CtaButtonProps<SuccessPayload>;
 
-export const BatchCompleteButton = ({
-  exchangeIds,
-  variant = "primaryFill",
-  ...restProps
-}: Props) => {
-  const coreSdk = useCoreSdkOverrides({
-    coreSdkConfig: restProps.coreSdkConfig
-  });
+export const BatchCompleteButton = withQueryClientProvider(
+  ({ exchangeIds, variant = "primaryFill", ...restProps }: Props) => {
+    const coreSdk = useCoreSdkOverrides({
+      coreSdkConfig: restProps.coreSdkConfig
+    });
 
-  const actions = [
-    {
-      writeContractFn: () => coreSdk.completeExchangeBatch(exchangeIds),
-      signMetaTxFn: () =>
-        coreSdk.signMetaTxCompleteExchangeBatch({
-          nonce: Date.now(),
-          exchangeIds
-        })
-    }
-  ];
+    const actions = [
+      {
+        writeContractFn: () => coreSdk.completeExchangeBatch(exchangeIds),
+        signMetaTxFn: () =>
+          coreSdk.signMetaTxCompleteExchangeBatch({
+            nonce: Date.now(),
+            exchangeIds
+          })
+      }
+    ];
 
-  return (
-    <CtaButton
-      variant={variant}
-      defaultLabel="Batch Complete"
-      successPayload={{ exchangeIds }}
-      actions={actions}
-      {...restProps}
-    />
-  );
-};
+    return (
+      <CtaButton
+        variant={variant}
+        defaultLabel="Batch Complete"
+        successPayload={{ exchangeIds }}
+        actions={actions}
+        {...restProps}
+      />
+    );
+  }
+);

package/src/components/cta/exchange/CancelButton.tsx

@@ -4,6 +4,7 @@ import { BigNumberish } from "ethers";
 import { CtaButtonProps } from "../common/types";
 import { CtaButton } from "../common/CtaButton";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type AdditionalProps = {
   exchangeId: BigNumberish;
@@ -15,33 +16,31 @@ type SuccessPayload = {
 
 export type ICancelButton = AdditionalProps & CtaButtonProps<SuccessPayload>;
 
-export const CancelButton = ({
-  variant = "secondaryFill",
-  exchangeId,
-  ...restProps
-}: ICancelButton) => {
-  const coreSdk = useCoreSdkOverrides({
-    coreSdkConfig: restProps.coreSdkConfig
-  });
+export const CancelButton = withQueryClientProvider(
+  ({ variant = "secondaryFill", exchangeId, ...restProps }: ICancelButton) => {
+    const coreSdk = useCoreSdkOverrides({
+      coreSdkConfig: restProps.coreSdkConfig
+    });
 
-  const actions = [
-    {
-      writeContractFn: () => coreSdk.cancelVoucher(exchangeId),
-      signMetaTxFn: () =>
-        coreSdk.signMetaTxCancelVoucher({
-          nonce: Date.now(),
-          exchangeId
-        })
-    }
-  ];
+    const actions = [
+      {
+        writeContractFn: () => coreSdk.cancelVoucher(exchangeId),
+        signMetaTxFn: () =>
+          coreSdk.signMetaTxCancelVoucher({
+            nonce: Date.now(),
+            exchangeId
+          })
+      }
+    ];
 
-  return (
-    <CtaButton
-      variant={variant}
-      defaultLabel="Cancel"
-      successPayload={{ exchangeId }}
-      actions={actions}
-      {...restProps}
-    />
-  );
-};
+    return (
+      <CtaButton
+        variant={variant}
+        defaultLabel="Cancel"
+        successPayload={{ exchangeId }}
+        actions={actions}
+        {...restProps}
+      />
+    );
+  }
+);

package/src/components/cta/exchange/CompleteButton.tsx

@@ -4,6 +4,7 @@ import { BigNumberish } from "ethers";
 import { CtaButtonProps } from "../common/types";
 import { CtaButton } from "../common/CtaButton";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type AdditionalProps = {
   exchangeId: BigNumberish;
@@ -15,33 +16,31 @@ type SuccessPayload = {
 
 type Props = AdditionalProps & CtaButtonProps<SuccessPayload>;
 
-export const CompleteButton = ({
-  exchangeId,
-  variant = "primaryFill",
-  ...restProps
-}: Props) => {
-  const coreSdk = useCoreSdkOverrides({
-    coreSdkConfig: restProps.coreSdkConfig
-  });
+export const CompleteButton = withQueryClientProvider(
+  ({ exchangeId, variant = "primaryFill", ...restProps }: Props) => {
+    const coreSdk = useCoreSdkOverrides({
+      coreSdkConfig: restProps.coreSdkConfig
+    });
 
-  const actions = [
-    {
-      writeContractFn: () => coreSdk.completeExchange(exchangeId),
-      signMetaTxFn: () =>
-        coreSdk.signMetaTxCompleteExchange({
-          nonce: Date.now(),
-          exchangeId
-        })
-    }
-  ];
+    const actions = [
+      {
+        writeContractFn: () => coreSdk.completeExchange(exchangeId),
+        signMetaTxFn: () =>
+          coreSdk.signMetaTxCompleteExchange({
+            nonce: Date.now(),
+            exchangeId
+          })
+      }
+    ];
 
-  return (
-    <CtaButton
-      variant={variant}
-      defaultLabel="Complete"
-      successPayload={{ exchangeId }}
-      actions={actions}
-      {...restProps}
-    />
-  );
-};
+    return (
+      <CtaButton
+        variant={variant}
+        defaultLabel="Complete"
+        successPayload={{ exchangeId }}
+        actions={actions}
+        {...restProps}
+      />
+    );
+  }
+);

package/src/components/cta/exchange/ExpireButton.tsx

@@ -4,6 +4,7 @@ import { BigNumberish } from "ethers";
 import { CtaButtonProps } from "../common/types";
 import { CtaButton } from "../common/CtaButton";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type AdditionalProps = {
   exchangeId: BigNumberish;
@@ -15,33 +16,31 @@ type SuccessPayload = {
 
 export type IExpireButton = AdditionalProps & CtaButtonProps<SuccessPayload>;
 
-export const ExpireButton = ({
-  exchangeId,
-  variant = "secondaryFill",
-  ...restProps
-}: IExpireButton) => {
-  const coreSdk = useCoreSdkOverrides({
-    coreSdkConfig: restProps.coreSdkConfig
-  });
+export const ExpireButton = withQueryClientProvider(
+  ({ exchangeId, variant = "secondaryFill", ...restProps }: IExpireButton) => {
+    const coreSdk = useCoreSdkOverrides({
+      coreSdkConfig: restProps.coreSdkConfig
+    });
 
-  const actions = [
-    {
-      writeContractFn: () => coreSdk.expireVoucher(exchangeId),
-      signMetaTxFn: () =>
-        coreSdk.signMetaTxExpireVoucher({
-          nonce: Date.now(),
-          exchangeId
-        })
-    }
-  ];
+    const actions = [
+      {
+        writeContractFn: () => coreSdk.expireVoucher(exchangeId),
+        signMetaTxFn: () =>
+          coreSdk.signMetaTxExpireVoucher({
+            nonce: Date.now(),
+            exchangeId
+          })
+      }
+    ];
 
-  return (
-    <CtaButton
-      variant={variant}
-      defaultLabel="Expire"
-      successPayload={{ exchangeId }}
-      actions={actions}
-      {...restProps}
-    />
-  );
-};
+    return (
+      <CtaButton
+        variant={variant}
+        defaultLabel="Expire"
+        successPayload={{ exchangeId }}
+        actions={actions}
+        {...restProps}
+      />
+    );
+  }
+);

package/src/components/cta/exchange/RedeemButton.tsx

@@ -4,6 +4,7 @@ import { BigNumberish } from "ethers";
 import { CtaButtonProps } from "../common/types";
 import { CtaButton } from "../common/CtaButton";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type AdditionalProps = {
   exchangeId: BigNumberish;
@@ -15,33 +16,31 @@ type SuccessPayload = {
 
 export type IRedeemButton = AdditionalProps & CtaButtonProps<SuccessPayload>;
 
-export const RedeemButton = ({
-  exchangeId,
-  variant = "primaryFill",
-  ...restProps
-}: IRedeemButton) => {
-  const coreSdk = useCoreSdkOverrides({
-    coreSdkConfig: restProps.coreSdkConfig
-  });
+export const RedeemButton = withQueryClientProvider(
+  ({ exchangeId, variant = "primaryFill", ...restProps }: IRedeemButton) => {
+    const coreSdk = useCoreSdkOverrides({
+      coreSdkConfig: restProps.coreSdkConfig
+    });
 
-  const actions = [
-    {
-      writeContractFn: () => coreSdk.redeemVoucher(exchangeId),
-      signMetaTxFn: () =>
-        coreSdk.signMetaTxRedeemVoucher({
-          nonce: Date.now(),
-          exchangeId
-        })
-    }
-  ];
+    const actions = [
+      {
+        writeContractFn: () => coreSdk.redeemVoucher(exchangeId),
+        signMetaTxFn: () =>
+          coreSdk.signMetaTxRedeemVoucher({
+            nonce: Date.now(),
+            exchangeId
+          })
+      }
+    ];
 
-  return (
-    <CtaButton
-      variant={variant}
-      defaultLabel="Redeem"
-      successPayload={{ exchangeId }}
-      actions={actions}
-      {...restProps}
-    />
-  );
-};
+    return (
+      <CtaButton
+        variant={variant}
+        defaultLabel="Redeem"
+        successPayload={{ exchangeId }}
+        actions={actions}
+        {...restProps}
+      />
+    );
+  }
+);

package/src/components/cta/exchange/RevokeButton.tsx

@@ -4,6 +4,7 @@ import { BigNumberish } from "ethers";
 import { CtaButtonProps } from "../common/types";
 import { CtaButton } from "../common/CtaButton";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type AdditionalProps = {
   exchangeId: BigNumberish;
@@ -15,33 +16,31 @@ type SuccessPayload = {
 
 type IRevokeButton = AdditionalProps & CtaButtonProps<SuccessPayload>;
 
-export const RevokeButton = ({
-  exchangeId,
-  variant = "secondaryFill",
-  ...restProps
-}: IRevokeButton) => {
-  const coreSdk = useCoreSdkOverrides({
-    coreSdkConfig: restProps.coreSdkConfig
-  });
+export const RevokeButton = withQueryClientProvider(
+  ({ exchangeId, variant = "secondaryFill", ...restProps }: IRevokeButton) => {
+    const coreSdk = useCoreSdkOverrides({
+      coreSdkConfig: restProps.coreSdkConfig
+    });
 
-  const actions = [
-    {
-      writeContractFn: () => coreSdk.revokeVoucher(exchangeId),
-      signMetaTxFn: () =>
-        coreSdk.signMetaTxRevokeVoucher({
-          nonce: Date.now(),
-          exchangeId
-        })
-    }
-  ];
+    const actions = [
+      {
+        writeContractFn: () => coreSdk.revokeVoucher(exchangeId),
+        signMetaTxFn: () =>
+          coreSdk.signMetaTxRevokeVoucher({
+            nonce: Date.now(),
+            exchangeId
+          })
+      }
+    ];
 
-  return (
-    <CtaButton
-      variant={variant}
-      defaultLabel="Revoke"
-      successPayload={{ exchangeId }}
-      actions={actions}
-      {...restProps}
-    />
-  );
-};
+    return (
+      <CtaButton
+        variant={variant}
+        defaultLabel="Revoke"
+        successPayload={{ exchangeId }}
+        actions={actions}
+        {...restProps}
+      />
+    );
+  }
+);

package/src/components/cta/funds/DepositFundsButton.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 = {
   exchangeToken: string;
@@ -18,68 +19,70 @@ type SuccessPayload = TransactionReceipt;
 export type IDepositFundsButton = AdditionalProps &
   CtaButtonProps<SuccessPayload>;
 
-export const DepositFundsButton = ({
-  exchangeToken,
-  accountId,
-  variant = "primaryFill",
-  amountToDeposit,
-  ...restProps
-}: IDepositFundsButton) => {
-  const coreSdk = useCoreSdkOverrides({
-    coreSdkConfig: restProps.coreSdkConfig
-  });
-  const { isMetaTx, signerAddress } = useMetaTx(coreSdk);
+export const DepositFundsButton = withQueryClientProvider(
+  ({
+    exchangeToken,
+    accountId,
+    variant = "primaryFill",
+    amountToDeposit,
+    ...restProps
+  }: IDepositFundsButton) => {
+    const coreSdk = useCoreSdkOverrides({
+      coreSdkConfig: restProps.coreSdkConfig
+    });
+    const { isMetaTx, signerAddress } = useMetaTx(coreSdk);
 
-  const actions = [
-    // Approve exchange token
-    {
-      name: "approveExchangeToken" as const,
-      writeContractFn: () =>
-        coreSdk.approveExchangeToken(exchangeToken, constants.MaxInt256),
-      nativeMetaTxContract: exchangeToken,
-      signMetaTxFn: () =>
-        coreSdk.signNativeMetaTxApproveExchangeToken(
-          exchangeToken,
-          constants.MaxInt256
-        ),
-      additionalMetaTxCondition:
-        coreSdk.checkMetaTxConfigSet({ contractAddress: exchangeToken }) &&
-        !!signerAddress,
-      shouldActionRun: async () => {
-        const isNativeCoin = constants.AddressZero === exchangeToken;
-        if (isNativeCoin) {
-          return false;
-        }
-        const allowance = await coreSdk.getProtocolAllowance(exchangeToken);
+    const actions = [
+      // Approve exchange token
+      {
+        name: "approveExchangeToken" as const,
+        writeContractFn: () =>
+          coreSdk.approveExchangeToken(exchangeToken, constants.MaxInt256),
+        nativeMetaTxContract: exchangeToken,
+        signMetaTxFn: () =>
+          coreSdk.signNativeMetaTxApproveExchangeToken(
+            exchangeToken,
+            constants.MaxInt256
+          ),
+        additionalMetaTxCondition:
+          coreSdk.checkMetaTxConfigSet({ contractAddress: exchangeToken }) &&
+          !!signerAddress,
+        shouldActionRun: async () => {
+          const isNativeCoin = constants.AddressZero === exchangeToken;
+          if (isNativeCoin) {
+            return false;
+          }
+          const allowance = await coreSdk.getProtocolAllowance(exchangeToken);
 
-        return BigNumber.from(allowance).lt(amountToDeposit);
+          return BigNumber.from(allowance).lt(amountToDeposit);
+        }
+      },
+      // Deposit funds
+      {
+        name: "depositFunds" as const,
+        writeContractFn: () =>
+          coreSdk.depositFunds(accountId, amountToDeposit, exchangeToken),
+        signMetaTxFn: () =>
+          coreSdk.signMetaTxDepositFunds({
+            sellerId: accountId,
+            fundsTokenAddress: exchangeToken,
+            fundsAmount: amountToDeposit,
+            nonce: Date.now()
+          }),
+        additionalMetaTxCondition: Boolean(
+          isMetaTx && exchangeToken !== ethers.constants.AddressZero
+        )
       }
-    },
-    // Deposit funds
-    {
-      name: "depositFunds" as const,
-      writeContractFn: () =>
-        coreSdk.depositFunds(accountId, amountToDeposit, exchangeToken),
-      signMetaTxFn: () =>
-        coreSdk.signMetaTxDepositFunds({
-          sellerId: accountId,
-          fundsTokenAddress: exchangeToken,
-          fundsAmount: amountToDeposit,
-          nonce: Date.now()
-        }),
-      additionalMetaTxCondition: Boolean(
-        isMetaTx && exchangeToken !== ethers.constants.AddressZero
-      )
-    }
-  ];
+    ];
 
-  return (
-    <CtaButton
-      variant={variant}
-      defaultLabel="Deposit"
-      successPayload={(receipt) => receipt}
-      actions={actions}
-      {...restProps}
-    />
-  );
-};
+    return (
+      <CtaButton
+        variant={variant}
+        defaultLabel="Deposit"
+        successPayload={(receipt) => receipt}
+        actions={actions}
+        {...restProps}
+      />
+    );
+  }
+);

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

@@ -4,6 +4,7 @@ import { CtaButtonProps } from "../common/types";
 import { CtaButton } from "../common/CtaButton";
 import { TransactionReceipt } from "@bosonprotocol/common";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type AdditionalProps = {
   accountId: string;
@@ -14,29 +15,31 @@ type SuccessPayload = TransactionReceipt;
 export type IWithdrawAllFundsButton = AdditionalProps &
   CtaButtonProps<SuccessPayload>;
 
-export const WithdrawAllFundsButton = ({
-  accountId,
-  variant = "primaryFill",
-  ...restProps
-}: IWithdrawAllFundsButton) => {
-  const coreSdk = useCoreSdkOverrides({
-    coreSdkConfig: restProps.coreSdkConfig
-  });
-  const actions = [
-    // Withdraw all funds
-    {
-      writeContractFn: () => coreSdk.withdrawAllAvailableFunds(accountId)
-    }
-    // TODO: signMetaTxWithdrawAllFunds
-  ];
+export const WithdrawAllFundsButton = withQueryClientProvider(
+  ({
+    accountId,
+    variant = "primaryFill",
+    ...restProps
+  }: IWithdrawAllFundsButton) => {
+    const coreSdk = useCoreSdkOverrides({
+      coreSdkConfig: restProps.coreSdkConfig
+    });
+    const actions = [
+      // Withdraw all funds
+      {
+        writeContractFn: () => coreSdk.withdrawAllAvailableFunds(accountId)
+      }
+      // TODO: signMetaTxWithdrawAllFunds
+    ];
 
-  return (
-    <CtaButton
-      variant={variant}
-      defaultLabel="Withdraw all funds"
-      successPayload={(receipt) => receipt}
-      actions={actions}
-      {...restProps}
-    />
-  );
-};
+    return (
+      <CtaButton
+        variant={variant}
+        defaultLabel="Withdraw all funds"
+        successPayload={(receipt) => receipt}
+        actions={actions}
+        {...restProps}
+      />
+    );
+  }
+);