From 8d3ffab13437db5e5ffd5a0ca774e573f81cb5dc Mon Sep 17 00:00:00 2001 From: Albert Folch Date: Wed, 20 Mar 2024 11:43:25 +0100 Subject: [PATCH] fix: add react-kit providers --- .../cta/dispute/DecideDisputeButton.tsx | 53 ++-- .../cta/dispute/EscalateDisputeButton.tsx | 59 ++-- .../cta/dispute/ExpireDisputeButton.tsx | 51 ++-- .../dispute/ExpireEscalationDisputeButton.tsx | 51 ++-- .../dispute/ExtendDisputeTimeoutButton.tsx | 55 ++-- .../cta/dispute/RaiseDisputeButton.tsx | 59 ++-- .../cta/dispute/RefuseDisputeButton.tsx | 51 ++-- .../RemoveFeesDisputeResolverButton.tsx | 139 ++++----- .../cta/dispute/ResolveDisputeButton.tsx | 81 +++--- .../cta/dispute/RetractDisputeButton.tsx | 59 ++-- .../cta/exchange/BatchCompleteButton.tsx | 55 ++-- .../components/cta/exchange/CancelButton.tsx | 55 ++-- .../cta/exchange/CompleteButton.tsx | 55 ++-- .../components/cta/exchange/ExpireButton.tsx | 55 ++-- .../components/cta/exchange/RedeemButton.tsx | 55 ++-- .../components/cta/exchange/RevokeButton.tsx | 55 ++-- .../cta/funds/DepositFundsButton.tsx | 125 ++++---- .../cta/funds/WithdrawFundsButton.tsx | 91 +++--- .../components/cta/offer/BatchVoidButton.tsx | 159 ++++++----- .../src/components/cta/offer/CommitButton.tsx | 138 ++++----- .../cta/offer/CreateOfferButton.tsx | 269 +++++++++--------- .../src/components/cta/offer/VoidButton.tsx | 155 +++++----- .../cta/seller/CreateSellerButton.tsx | 163 +++++------ .../queryClient/QueryClientProviderCustom.tsx | 27 ++ .../queryClient/withQueryClientProvider.tsx | 50 ++++ .../widgets/commit/CommitWidgetProviders.tsx | 97 +++---- .../widgets/finance/FinanceWidget.tsx | 34 +-- .../redemption/RedemptionWidgetProviders.tsx | 50 ++-- 28 files changed, 1220 insertions(+), 1126 deletions(-) create mode 100644 packages/react-kit/src/components/queryClient/QueryClientProviderCustom.tsx create mode 100644 packages/react-kit/src/components/queryClient/withQueryClientProvider.tsx diff --git a/packages/react-kit/src/components/cta/dispute/DecideDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/DecideDisputeButton.tsx index a4f75294a..3db5f5839 100644 --- a/packages/react-kit/src/components/cta/dispute/DecideDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/DecideDisputeButton.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; @@ -17,29 +18,31 @@ type SuccessPayload = { export type IDecideDisputeButton = AdditionalProps & CtaButtonProps; -export const DecideDisputeButton = ({ - exchangeId, - buyerPercent, - variant = "primaryFill", - ...restProps -}: IDecideDisputeButton) => { - const coreSdk = useCoreSdkOverrides({ - coreSdkConfig: restProps.coreSdkConfig - }); - const actions = [ - { - writeContractFn: () => coreSdk.decideDispute(exchangeId, buyerPercent) - // TODO: ADD signMetaTxFn - has not been implemented in coreSDK yet. - } - ]; +export const DecideDisputeButton = withQueryClientProvider( + ({ + exchangeId, + buyerPercent, + variant = "primaryFill", + ...restProps + }: IDecideDisputeButton) => { + const coreSdk = useCoreSdkOverrides({ + coreSdkConfig: restProps.coreSdkConfig + }); + const actions = [ + { + writeContractFn: () => coreSdk.decideDispute(exchangeId, buyerPercent) + // TODO: ADD signMetaTxFn - has not been implemented in coreSDK yet. + } + ]; - return ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/dispute/EscalateDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/EscalateDisputeButton.tsx index adc772a9f..6d5ca2e05 100644 --- a/packages/react-kit/src/components/cta/dispute/EscalateDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/EscalateDisputeButton.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; @@ -16,33 +17,35 @@ type SuccessPayload = { export type IEscalateDisputeButton = AdditionalProps & CtaButtonProps; -export const EscalateDisputeButton = ({ - variant = "secondaryFill", - exchangeId, - ...restProps -}: IEscalateDisputeButton) => { - const coreSdk = useCoreSdkOverrides({ - coreSdkConfig: restProps.coreSdkConfig - }); +export const EscalateDisputeButton = withQueryClientProvider( + ({ + variant = "secondaryFill", + exchangeId, + ...restProps + }: IEscalateDisputeButton) => { + const coreSdk = useCoreSdkOverrides({ + coreSdkConfig: restProps.coreSdkConfig + }); - const actions = [ - { - writeContractFn: () => coreSdk.escalateDispute(exchangeId), - signMetaTxFn: () => - coreSdk.signMetaTxEscalateDispute({ - exchangeId, - nonce: Date.now() - }) - } - ]; + const actions = [ + { + writeContractFn: () => coreSdk.escalateDispute(exchangeId), + signMetaTxFn: () => + coreSdk.signMetaTxEscalateDispute({ + exchangeId, + nonce: Date.now() + }) + } + ]; - return ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/dispute/ExpireDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/ExpireDisputeButton.tsx index 61f0a1f56..589cbfda2 100644 --- a/packages/react-kit/src/components/cta/dispute/ExpireDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/ExpireDisputeButton.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; @@ -16,29 +17,31 @@ type SuccessPayload = { export type IExpireDisputeButton = AdditionalProps & CtaButtonProps; -export const ExpireDisputeButton = ({ - variant = "secondaryFill", - exchangeId, - ...restProps -}: IExpireDisputeButton) => { - const coreSdk = useCoreSdkOverrides({ - coreSdkConfig: restProps.coreSdkConfig - }); +export const ExpireDisputeButton = withQueryClientProvider( + ({ + variant = "secondaryFill", + exchangeId, + ...restProps + }: IExpireDisputeButton) => { + const coreSdk = useCoreSdkOverrides({ + coreSdkConfig: restProps.coreSdkConfig + }); - const actions = [ - { - writeContractFn: () => coreSdk.expireDispute(exchangeId) - // TODO: ADD signMetaTxFn - has not been implemented in coreSDK yet. - } - ]; + const actions = [ + { + writeContractFn: () => coreSdk.expireDispute(exchangeId) + // TODO: ADD signMetaTxFn - has not been implemented in coreSDK yet. + } + ]; - return ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/dispute/ExpireEscalationDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/ExpireEscalationDisputeButton.tsx index cac51bc74..18090293e 100644 --- a/packages/react-kit/src/components/cta/dispute/ExpireEscalationDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/ExpireEscalationDisputeButton.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; @@ -16,28 +17,30 @@ type SuccessPayload = { export type IExpireEscalationDisputeButton = AdditionalProps & CtaButtonProps; -export const ExpireEscalationDisputeButton = ({ - exchangeId, - variant = "secondaryFill", - ...restProps -}: IExpireEscalationDisputeButton) => { - const coreSdk = useCoreSdkOverrides({ - coreSdkConfig: restProps.coreSdkConfig - }); - const actions = [ - { - writeContractFn: () => coreSdk.expireEscalatedDispute(exchangeId) - // TODO: ADD signMetaTxFn - has not been implemented in coreSDK yet. - } - ]; +export const ExpireEscalationDisputeButton = withQueryClientProvider( + ({ + exchangeId, + variant = "secondaryFill", + ...restProps + }: IExpireEscalationDisputeButton) => { + const coreSdk = useCoreSdkOverrides({ + coreSdkConfig: restProps.coreSdkConfig + }); + const actions = [ + { + writeContractFn: () => coreSdk.expireEscalatedDispute(exchangeId) + // TODO: ADD signMetaTxFn - has not been implemented in coreSDK yet. + } + ]; - return ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/dispute/ExtendDisputeTimeoutButton.tsx b/packages/react-kit/src/components/cta/dispute/ExtendDisputeTimeoutButton.tsx index 677fa895f..dd0076ea9 100644 --- a/packages/react-kit/src/components/cta/dispute/ExtendDisputeTimeoutButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/ExtendDisputeTimeoutButton.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; @@ -17,31 +18,33 @@ type SuccessPayload = { export type IExtendDisputeTimeoutButton = AdditionalProps & CtaButtonProps; -export const ExtendDisputeTimeoutButton = ({ - variant = "primaryFill", - exchangeId, - newDisputeTimeout, - ...restProps -}: IExtendDisputeTimeoutButton) => { - const coreSdk = useCoreSdkOverrides({ - coreSdkConfig: restProps.coreSdkConfig - }); +export const ExtendDisputeTimeoutButton = withQueryClientProvider( + ({ + variant = "primaryFill", + exchangeId, + newDisputeTimeout, + ...restProps + }: IExtendDisputeTimeoutButton) => { + const coreSdk = useCoreSdkOverrides({ + coreSdkConfig: restProps.coreSdkConfig + }); - const actions = [ - { - writeContractFn: () => - coreSdk.extendDisputeTimeout(exchangeId, newDisputeTimeout) - // TODO: ADD signMetaTxFn - has not been implemented in coreSDK yet. - } - ]; + const actions = [ + { + writeContractFn: () => + coreSdk.extendDisputeTimeout(exchangeId, newDisputeTimeout) + // TODO: ADD signMetaTxFn - has not been implemented in coreSDK yet. + } + ]; - return ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/dispute/RaiseDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/RaiseDisputeButton.tsx index e537d4418..ad72961a9 100644 --- a/packages/react-kit/src/components/cta/dispute/RaiseDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/RaiseDisputeButton.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; @@ -16,33 +17,35 @@ type SuccessPayload = { export type IRaiseDisputeButton = AdditionalProps & CtaButtonProps; -export const RaiseDisputeButton = ({ - variant = "secondaryFill", - exchangeId, - ...restProps -}: IRaiseDisputeButton) => { - const coreSdk = useCoreSdkOverrides({ - coreSdkConfig: restProps.coreSdkConfig - }); +export const RaiseDisputeButton = withQueryClientProvider( + ({ + variant = "secondaryFill", + exchangeId, + ...restProps + }: IRaiseDisputeButton) => { + const coreSdk = useCoreSdkOverrides({ + coreSdkConfig: restProps.coreSdkConfig + }); - const actions = [ - { - writeContractFn: () => coreSdk.raiseDispute(exchangeId), - signMetaTxFn: async () => - coreSdk.signMetaTxRaiseDispute({ - nonce: Date.now(), - exchangeId - }) - } - ]; + const actions = [ + { + writeContractFn: () => coreSdk.raiseDispute(exchangeId), + signMetaTxFn: async () => + coreSdk.signMetaTxRaiseDispute({ + nonce: Date.now(), + exchangeId + }) + } + ]; - return ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/dispute/RefuseDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/RefuseDisputeButton.tsx index 83e631756..fd8bb640c 100644 --- a/packages/react-kit/src/components/cta/dispute/RefuseDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/RefuseDisputeButton.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; @@ -16,28 +17,30 @@ type SuccessPayload = { export type IRefuseDisputeButton = AdditionalProps & CtaButtonProps; -export const RefuseDisputeButton = ({ - exchangeId, - variant = "secondaryFill", - ...restProps -}: IRefuseDisputeButton) => { - const coreSdk = useCoreSdkOverrides({ - coreSdkConfig: restProps.coreSdkConfig - }); - const actions = [ - { - writeContractFn: () => coreSdk.refuseEscalatedDispute(exchangeId) - // TODO: ADD signMetaTxFn - has not been implemented in coreSDK yet. - } - ]; +export const RefuseDisputeButton = withQueryClientProvider( + ({ + exchangeId, + variant = "secondaryFill", + ...restProps + }: IRefuseDisputeButton) => { + const coreSdk = useCoreSdkOverrides({ + coreSdkConfig: restProps.coreSdkConfig + }); + const actions = [ + { + writeContractFn: () => coreSdk.refuseEscalatedDispute(exchangeId) + // TODO: ADD signMetaTxFn - has not been implemented in coreSDK yet. + } + ]; - return ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/dispute/RemoveFeesDisputeResolverButton.tsx b/packages/react-kit/src/components/cta/dispute/RemoveFeesDisputeResolverButton.tsx index 5d4e7651f..150c78a27 100644 --- a/packages/react-kit/src/components/cta/dispute/RemoveFeesDisputeResolverButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/RemoveFeesDisputeResolverButton.tsx @@ -8,6 +8,7 @@ import { CtaButtonProps } from "../common/types"; import { Loading } from "../../Loading"; import { CreateSellerArgs, TransactionResponse } from "@bosonprotocol/common"; import { ButtonSize } from "../../ui/buttonSize"; +import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider"; export type IRemoveFeesDisputeResolver = { exchangeId: BigNumberish; createSellerArgs: CreateSellerArgs; @@ -18,76 +19,78 @@ export type IRemoveFeesDisputeResolver = { exchangeId: BigNumberish; }>; -export const RemoveFeesDisputeResolver = ({ - exchangeId, - disabled = false, - showLoading = false, - extraInfo, - onSuccess, - onError, - onPendingSignature, - onPendingTransaction, - waitBlocks = 1, - children, - size = ButtonSize.Large, - variant = "primaryFill", - createSellerArgs, - buyerPercent, - disputeResolverId, - feeTokenAddresses, - ...coreSdkConfig -}: IRemoveFeesDisputeResolver) => { - const coreSdk = useCoreSdk(coreSdkConfig.coreSdkConfig); - const [isLoading, setIsLoading] = useState(false); +export const RemoveFeesDisputeResolver = withQueryClientProvider( + ({ + exchangeId, + disabled = false, + showLoading = false, + extraInfo, + onSuccess, + onError, + onPendingSignature, + onPendingTransaction, + waitBlocks = 1, + children, + size = ButtonSize.Large, + variant = "primaryFill", + createSellerArgs, + buyerPercent, + disputeResolverId, + feeTokenAddresses, + ...coreSdkConfig + }: IRemoveFeesDisputeResolver) => { + const coreSdk = useCoreSdk(coreSdkConfig.coreSdkConfig); + const [isLoading, setIsLoading] = useState(false); - return ( - - ); -}; + }} + > + + {children || "Remove Fees"} + {extraInfo && ((!isLoading && showLoading) || !showLoading) ? ( + {extraInfo} + ) : ( + <> + {isLoading && showLoading && ( + + + + )} + + )} + + + ); + } +); diff --git a/packages/react-kit/src/components/cta/dispute/ResolveDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/ResolveDisputeButton.tsx index 62f07ab9a..a8af048cc 100644 --- a/packages/react-kit/src/components/cta/dispute/ResolveDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/ResolveDisputeButton.tsx @@ -4,6 +4,7 @@ import { BigNumberish, utils } 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; @@ -21,44 +22,46 @@ type SuccessPayload = { export type IResolveDisputeButton = AdditionalProps & CtaButtonProps; -export const ResolveDisputeButton = ({ - exchangeId, - proposal, - variant = "primaryFill", - ...restProps -}: IResolveDisputeButton) => { - const coreSdk = useCoreSdkOverrides({ - coreSdkConfig: restProps.coreSdkConfig - }); - const signature = utils.splitSignature(proposal.signature); +export const ResolveDisputeButton = withQueryClientProvider( + ({ + exchangeId, + proposal, + variant = "primaryFill", + ...restProps + }: IResolveDisputeButton) => { + const coreSdk = useCoreSdkOverrides({ + coreSdkConfig: restProps.coreSdkConfig + }); + const signature = utils.splitSignature(proposal.signature); - const actions = [ - { - writeContractFn: () => - coreSdk.resolveDispute({ - exchangeId: exchangeId, - buyerPercentBasisPoints: proposal.percentageAmount, - sigR: signature.r, - sigS: signature.s, - sigV: signature.v - }), - signMetaTxFn: async () => - coreSdk.signMetaTxResolveDispute({ - exchangeId, - buyerPercent: proposal.percentageAmount, - counterpartySig: signature, - nonce: Date.now() - }) - } - ]; + const actions = [ + { + writeContractFn: () => + coreSdk.resolveDispute({ + exchangeId: exchangeId, + buyerPercentBasisPoints: proposal.percentageAmount, + sigR: signature.r, + sigS: signature.s, + sigV: signature.v + }), + signMetaTxFn: async () => + coreSdk.signMetaTxResolveDispute({ + exchangeId, + buyerPercent: proposal.percentageAmount, + counterpartySig: signature, + nonce: Date.now() + }) + } + ]; - return ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/dispute/RetractDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/RetractDisputeButton.tsx index 0be5dbf6e..3bc460062 100644 --- a/packages/react-kit/src/components/cta/dispute/RetractDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/RetractDisputeButton.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; @@ -16,33 +17,35 @@ type SuccessPayload = { export type IRetractDisputeButton = AdditionalProps & CtaButtonProps; -export const RetractDisputeButton = ({ - exchangeId, - variant = "primaryFill", - ...restProps -}: IRetractDisputeButton) => { - const coreSdk = useCoreSdkOverrides({ - coreSdkConfig: restProps.coreSdkConfig - }); +export const RetractDisputeButton = withQueryClientProvider( + ({ + exchangeId, + variant = "primaryFill", + ...restProps + }: IRetractDisputeButton) => { + const coreSdk = useCoreSdkOverrides({ + coreSdkConfig: restProps.coreSdkConfig + }); - const actions = [ - { - writeContractFn: () => coreSdk.retractDispute(exchangeId), - signMetaTxFn: async () => - coreSdk.signMetaTxRetractDispute({ - nonce: Date.now(), - exchangeId - }) - } - ]; + const actions = [ + { + writeContractFn: () => coreSdk.retractDispute(exchangeId), + signMetaTxFn: async () => + coreSdk.signMetaTxRetractDispute({ + nonce: Date.now(), + exchangeId + }) + } + ]; - return ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/exchange/BatchCompleteButton.tsx b/packages/react-kit/src/components/cta/exchange/BatchCompleteButton.tsx index 850b075dc..1afc9e872 100644 --- a/packages/react-kit/src/components/cta/exchange/BatchCompleteButton.tsx +++ b/packages/react-kit/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; -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 ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/exchange/CancelButton.tsx b/packages/react-kit/src/components/cta/exchange/CancelButton.tsx index adc4971e2..b995a6e86 100644 --- a/packages/react-kit/src/components/cta/exchange/CancelButton.tsx +++ b/packages/react-kit/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; -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 ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/exchange/CompleteButton.tsx b/packages/react-kit/src/components/cta/exchange/CompleteButton.tsx index c7a106c21..52422aba7 100644 --- a/packages/react-kit/src/components/cta/exchange/CompleteButton.tsx +++ b/packages/react-kit/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; -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 ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/exchange/ExpireButton.tsx b/packages/react-kit/src/components/cta/exchange/ExpireButton.tsx index a0c2dc1aa..95cd29e19 100644 --- a/packages/react-kit/src/components/cta/exchange/ExpireButton.tsx +++ b/packages/react-kit/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; -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 ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/exchange/RedeemButton.tsx b/packages/react-kit/src/components/cta/exchange/RedeemButton.tsx index d656b9dcf..1c0fbafb3 100644 --- a/packages/react-kit/src/components/cta/exchange/RedeemButton.tsx +++ b/packages/react-kit/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; -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 ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/exchange/RevokeButton.tsx b/packages/react-kit/src/components/cta/exchange/RevokeButton.tsx index 2494a8935..77cbed281 100644 --- a/packages/react-kit/src/components/cta/exchange/RevokeButton.tsx +++ b/packages/react-kit/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; -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 ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/funds/DepositFundsButton.tsx b/packages/react-kit/src/components/cta/funds/DepositFundsButton.tsx index 6a0c3e58a..ff0a62003 100644 --- a/packages/react-kit/src/components/cta/funds/DepositFundsButton.tsx +++ b/packages/react-kit/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; -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 ( - receipt} - actions={actions} - {...restProps} - /> - ); -}; + return ( + receipt} + actions={actions} + {...restProps} + /> + ); + } +); diff --git a/packages/react-kit/src/components/cta/funds/WithdrawFundsButton.tsx b/packages/react-kit/src/components/cta/funds/WithdrawFundsButton.tsx index b089ebd4a..686b4aeb7 100644 --- a/packages/react-kit/src/components/cta/funds/WithdrawFundsButton.tsx +++ b/packages/react-kit/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; -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 ( - receipt} - actions={actions} - {...restProps} - /> - ); -}; + return ( + receipt} + actions={actions} + {...restProps} + /> + ); + } +); diff --git a/packages/react-kit/src/components/cta/offer/BatchVoidButton.tsx b/packages/react-kit/src/components/cta/offer/BatchVoidButton.tsx index e5009e449..80f43bbfe 100644 --- a/packages/react-kit/src/components/cta/offer/BatchVoidButton.tsx +++ b/packages/react-kit/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(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(false); - const { isMetaTx } = useMetaTx(coreSdk); - return ( - - ); -}; + }} + {...rest} + > + + {children || "Batch Void"} + {extraInfo && ((!isLoading && showLoading) || !showLoading) ? ( + {extraInfo} + ) : ( + <> + {isLoading && showLoading && ( + + + + )} + + )} + + + ); + } +); diff --git a/packages/react-kit/src/components/cta/offer/CommitButton.tsx b/packages/react-kit/src/components/cta/offer/CommitButton.tsx index d3f50ae0d..8654241c4 100644 --- a/packages/react-kit/src/components/cta/offer/CommitButton.tsx +++ b/packages/react-kit/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; -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 ( - ({ - exchangeId: coreSdk.getCommittedExchangeIdFromLogs( - receipt.logs - ) as string - })} - actions={actions} - {...restProps} - /> - ); -}; + return ( + ({ + exchangeId: coreSdk.getCommittedExchangeIdFromLogs( + receipt.logs + ) as string + })} + actions={actions} + {...restProps} + /> + ); + } +); diff --git a/packages/react-kit/src/components/cta/offer/CreateOfferButton.tsx b/packages/react-kit/src/components/cta/offer/CreateOfferButton.tsx index ffd307f06..13c03ad93 100644 --- a/packages/react-kit/src/components/cta/offer/CreateOfferButton.tsx +++ b/packages/react-kit/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(false); + const [isLoading, setIsLoading] = useState(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 ( - - ); -}; + return ( + + ); + } +); diff --git a/packages/react-kit/src/components/cta/offer/VoidButton.tsx b/packages/react-kit/src/components/cta/offer/VoidButton.tsx index 44a7e7de6..ea1b44d95 100644 --- a/packages/react-kit/src/components/cta/offer/VoidButton.tsx +++ b/packages/react-kit/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(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(false); - const { isMetaTx } = useMetaTx(coreSdk); + const { isMetaTx } = useMetaTx(coreSdk); - return ( - - ); -}; + }} + {...rest} + > + + {children || "Void"} + {extraInfo && ((!isLoading && showLoading) || !showLoading) ? ( + {extraInfo} + ) : ( + <> + {isLoading && showLoading && ( + + + + )} + + )} + + + ); + } +); diff --git a/packages/react-kit/src/components/cta/seller/CreateSellerButton.tsx b/packages/react-kit/src/components/cta/seller/CreateSellerButton.tsx index 79846c6df..0e9975ffc 100644 --- a/packages/react-kit/src/components/cta/seller/CreateSellerButton.tsx +++ b/packages/react-kit/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(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(false); - const { isMetaTx } = useMetaTx(coreSdk); + const { isMetaTx } = useMetaTx(coreSdk); - return ( - - ); -}; + }} + {...rest} + > + + {children || "Create Seller"} + {extraInfo && ((!isLoading && showLoading) || !showLoading) ? ( + {extraInfo} + ) : ( + <> + {isLoading && showLoading && ( + + + + )} + + )} + + + ); + } +); diff --git a/packages/react-kit/src/components/queryClient/QueryClientProviderCustom.tsx b/packages/react-kit/src/components/queryClient/QueryClientProviderCustom.tsx new file mode 100644 index 000000000..feb5635d3 --- /dev/null +++ b/packages/react-kit/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; + +export const QueryClientProviderCustom: React.FC< + QueryClientProviderCustomProps +> = ({ ...props }) => { + return ( + + {props.children} + + ); +}; diff --git a/packages/react-kit/src/components/queryClient/withQueryClientProvider.tsx b/packages/react-kit/src/components/queryClient/withQueryClientProvider.tsx new file mode 100644 index 000000000..f03cbea24 --- /dev/null +++ b/packages/react-kit/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; + +export const QueryClientProviderCustom: React.FC< + QueryClientProviderCustomProps +> = ({ ...props }) => { + return ( + + {props.children} + + ); +}; + +export const withQueryClientProvider =

( + WrappedComponent: React.ComponentType

+) => { + // Define the props type for the wrapped component + type Props = P; + + // Return a new component + const WithQueryClientProvider: React.FC = (props) => { + return ( + + + + ); + }; + + // Set display name for debugging purposes + const displayName = + WrappedComponent.displayName || WrappedComponent.name || "Component"; + WithQueryClientProvider.displayName = `withQueryClientProviderCustom(${displayName})`; + + return WithQueryClientProvider; +}; diff --git a/packages/react-kit/src/components/widgets/commit/CommitWidgetProviders.tsx b/packages/react-kit/src/components/widgets/commit/CommitWidgetProviders.tsx index f1da36d84..8e6865cff 100644 --- a/packages/react-kit/src/components/widgets/commit/CommitWidgetProviders.tsx +++ b/packages/react-kit/src/components/widgets/commit/CommitWidgetProviders.tsx @@ -21,6 +21,7 @@ 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 & @@ -30,13 +31,6 @@ export type CommitWidgetProvidersProps = IpfsProviderProps & withReduxProvider: boolean; }; -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - refetchOnWindowFocus: false - } - } -}); const { infuraKey, magicLinkKey } = CONFIG; export const CommitWidgetReduxProvider = ({ children @@ -58,47 +52,43 @@ export const CommitWidgetReduxUpdaters = ({ return {children}; }; -export const CommitWidgetProviders: React.FC = ({ - children, - withReduxProvider, - ...props -}) => { - const isWindowVisible = useIsWindowVisible(); - const WithReduxProvider = useCallback( - ({ children: providersChildren }: { children: ReactNode }) => { - return withReduxProvider ? ( - - {providersChildren} - - ) : ( - <>{providersChildren} - ); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, - [withReduxProvider] - ); - const WithUpdaters = useCallback( - ({ children: updatersChildren }: { children: ReactNode }) => { - return withReduxProvider ? ( - - {updatersChildren} - - ) : ( - <>{updatersChildren} - ); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, - [withReduxProvider, isWindowVisible] - ); - return ( - - - - +export const CommitWidgetProviders: React.FC = + withQueryClientProvider(({ children, withReduxProvider, ...props }) => { + const isWindowVisible = useIsWindowVisible(); + const WithReduxProvider = useCallback( + ({ children: providersChildren }: { children: ReactNode }) => { + return withReduxProvider ? ( + + {providersChildren} + + ) : ( + <>{providersChildren} + ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, + [withReduxProvider] + ); + const WithUpdaters = useCallback( + ({ children: updatersChildren }: { children: ReactNode }) => { + return withReduxProvider ? ( + + {updatersChildren} + + ) : ( + <>{updatersChildren} + ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, + [withReduxProvider, isWindowVisible] + ); + return ( + + + @@ -112,12 +102,11 @@ export const CommitWidgetProviders: React.FC = ({ - - - - - ); -}; + + + + ); + }); function UpdatersWrapper({ children, diff --git a/packages/react-kit/src/components/widgets/finance/FinanceWidget.tsx b/packages/react-kit/src/components/widgets/finance/FinanceWidget.tsx index b094261dd..408977e35 100644 --- a/packages/react-kit/src/components/widgets/finance/FinanceWidget.tsx +++ b/packages/react-kit/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) { } const Component = WithSellerData(Finance); -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - refetchOnWindowFocus: false - } - } -}); - type FinanceWidgetProps = { walletConnectProjectId: string; } & Omit & @@ -182,18 +174,16 @@ export function FinanceWidget(props: FinanceWidgetProps) { - - - - {!withExternalSigner && ( - - - - )} - - - - + + + {!withExternalSigner && ( + + + + )} + + + @@ -201,4 +191,4 @@ export function FinanceWidget(props: FinanceWidgetProps) { ); } -export default FinanceWidget; +export default withQueryClientProvider(FinanceWidget); diff --git a/packages/react-kit/src/components/widgets/redemption/RedemptionWidgetProviders.tsx b/packages/react-kit/src/components/widgets/redemption/RedemptionWidgetProviders.tsx index 81f2a9f7f..012b5800d 100644 --- a/packages/react-kit/src/components/widgets/redemption/RedemptionWidgetProviders.tsx +++ b/packages/react-kit/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 & @@ -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 ( - - - = + withQueryClientProvider(({ children, ...props }) => { + const parentOrigin = getParentWindowOrigin(); + return ( + - - + + + @@ -74,9 +65,8 @@ export const RedemptionWidgetProviders: React.FC< - - - - - ); -}; + + + + ); + });