From 2b92c34d6fb917a26fa12b7112a5b25ebc33b0de Mon Sep 17 00:00:00 2001 From: damnnou Date: Thu, 30 May 2024 17:32:05 +0300 Subject: [PATCH] fix: add isPending to all action buttons --- .../create-pool/CreatePoolForm/index.tsx | 9 ++++++--- .../AddLiquidityButton/index.tsx | 20 ++++++++++++------- .../farming/ActiveFarming/index.tsx | 6 +++--- .../modals/RemoveLiquidityModal/index.tsx | 6 +++--- .../modals/SelectPositionFarmModal/index.tsx | 14 +++++++------ .../position/ActiveFarmingCard/index.tsx | 11 +++++----- .../position/ClosedFarmingCard/index.tsx | 6 +++--- src/components/position/CollectFees/index.tsx | 6 +++--- .../IncreaseLiquidityButton/index.tsx | 20 ++++++++++++------- src/components/swap/SwapButton/index.tsx | 8 +++++++- src/hooks/common/useApprove.ts | 5 +++-- src/hooks/farming/useFarmApprove.ts | 3 ++- src/hooks/farming/useFarmHarvest.ts | 6 ++++-- src/hooks/farming/useFarmStake.ts | 6 ++++-- src/hooks/swap/useSwapCallback.ts | 10 ++++++---- src/hooks/swap/useWrapCallback.ts | 12 ++++++----- 16 files changed, 91 insertions(+), 57 deletions(-) diff --git a/src/components/create-pool/CreatePoolForm/index.tsx b/src/components/create-pool/CreatePoolForm/index.tsx index 9b826c48..ea180dbc 100644 --- a/src/components/create-pool/CreatePoolForm/index.tsx +++ b/src/components/create-pool/CreatePoolForm/index.tsx @@ -75,7 +75,7 @@ const CreatePoolForm = () => { }); - const { data: createPoolData, write: createPool } = + const { data: createPoolData, write: createPool, isLoading: isPending } = useContractWrite(createPoolConfig); const { isLoading } = useTransactionAwait( @@ -123,11 +123,14 @@ const CreatePoolForm = () => { isPoolExists || !startPriceTypedValue || !areCurrenciesSelected || - isSameToken + isSameToken || + isPending } onClick={() => createPool && createPool()} > - {isLoading ? ( + {isPending ? ( + 'Signing...' + ) : isLoading ? ( ) : isSameToken ? ( 'Select another pair' diff --git a/src/components/create-position/AddLiquidityButton/index.tsx b/src/components/create-position/AddLiquidityButton/index.tsx index d7124640..5c24ba26 100644 --- a/src/components/create-position/AddLiquidityButton/index.tsx +++ b/src/components/create-position/AddLiquidityButton/index.tsx @@ -76,6 +76,7 @@ export const AddLiquidityButton = ({ const { approvalState: approvalStateA, approvalCallback: approvalCallbackA, + isPending: isPendingA, } = useApprove( mintInfo.parsedAmounts[Field.CURRENCY_A], ALGEBRA_POSITION_MANAGER @@ -83,6 +84,7 @@ export const AddLiquidityButton = ({ const { approvalState: approvalStateB, approvalCallback: approvalCallbackB, + isPending: isPendingB, } = useApprove( mintInfo.parsedAmounts[Field.CURRENCY_B], ALGEBRA_POSITION_MANAGER @@ -116,7 +118,7 @@ export const AddLiquidityButton = ({ value: BigInt(value || 0), }); - const { data: addLiquidityData, write: addLiquidity } = + const { data: addLiquidityData, write: addLiquidity, isLoading: isAddLiquidityPending } = useContractWrite(addLiquidityConfig); const { isLoading: isAddingLiquidityLoading } = useTransactionAwait( @@ -150,11 +152,13 @@ export const AddLiquidityButton = ({
{showApproveA && ( ); }; diff --git a/src/components/farming/ActiveFarming/index.tsx b/src/components/farming/ActiveFarming/index.tsx index 3db4a60a..906a8a76 100644 --- a/src/components/farming/ActiveFarming/index.tsx +++ b/src/components/farming/ActiveFarming/index.tsx @@ -100,7 +100,7 @@ const ActiveFarming = ({ 60 * 24; - const { isLoading, onHarvestAll, isSuccess } = useFarmHarvestAll( + const { isLoading, onHarvestAll, isSuccess, isPending: isHarvestPending } = useFarmHarvestAll( { rewardToken: farming.farming.rewardToken, bonusRewardToken: farming.farming.bonusRewardToken, @@ -258,12 +258,12 @@ const ActiveFarming = ({ disabled={ (rewardEarnedUSD === 0 && bonusRewardEarnedUSD === 0) || - isLoading + isLoading || isHarvestPending } onClick={handleHarvestAll} className="w-1/2" > - {isLoading ? : 'Collect Rewards'} + {isHarvestPending ? 'Signing...' : isLoading ? : 'Collect Rewards'} { enabled: Boolean(calldata) }); - const { data: removeLiquidityData, write: removeLiquidity } = useContractWrite(removeLiquidityConfig) + const { data: removeLiquidityData, write: removeLiquidity, isLoading: isPending } = useContractWrite(removeLiquidityConfig) const { isLoading: isRemoveLoading, isSuccess } = useTransactionAwait( removeLiquidityData?.hash, @@ -94,7 +94,7 @@ const RemoveLiquidityModal = ({ positionId }: RemoveLiquidityModalProps) => { } ) - const isDisabled = sliderValue[0] === 0 || isRemoveLoading || !removeLiquidity + const isDisabled = sliderValue[0] === 0 || isRemoveLoading || !removeLiquidity || isPending useEffect(() => { onPercentSelect(sliderValue[0]) @@ -180,7 +180,7 @@ const RemoveLiquidityModal = ({ positionId }: RemoveLiquidityModalProps) => { />
diff --git a/src/components/modals/SelectPositionFarmModal/index.tsx b/src/components/modals/SelectPositionFarmModal/index.tsx index d4b25298..be7ccc25 100644 --- a/src/components/modals/SelectPositionFarmModal/index.tsx +++ b/src/components/modals/SelectPositionFarmModal/index.tsx @@ -35,9 +35,9 @@ export function SelectPositionFarmModal({ const { approved, isLoading: isApproving } = useFarmCheckApprove(tokenId); - const { isLoading: isApproveLoading, onApprove } = useFarmApprove(tokenId); + const { isLoading: isApproveLoading, onApprove, isPending: isApprovePending } = useFarmApprove(tokenId); - const { isLoading: isStakeLoading, onStake } = useFarmStake({ + const { isLoading: isStakeLoading, onStake, isPending: isStakePending } = useFarmStake({ tokenId, rewardToken: farming.farming.rewardToken, bonusRewardToken: farming.farming.bonusRewardToken, @@ -130,11 +130,13 @@ export function SelectPositionFarmModal({ ) : selectedPosition && availablePositions.length > 0 ? ( <> ) : ( diff --git a/src/components/position/ActiveFarmingCard/index.tsx b/src/components/position/ActiveFarmingCard/index.tsx index ddf725ab..d4b8762d 100644 --- a/src/components/position/ActiveFarmingCard/index.tsx +++ b/src/components/position/ActiveFarmingCard/index.tsx @@ -49,9 +49,10 @@ const ActiveFarmingCard = ({ onHarvest, isLoading: isHarvesting, isSuccess: isHarvested, + isPending: isHarvestPending, } = useFarmHarvest(farmingArgs); - const { onUnstake, isLoading: isUnstaking } = useFarmUnstake(farmingArgs); + const { onUnstake, isLoading: isUnstaking, isPending: isUnstakePending } = useFarmUnstake(farmingArgs); const handleUnstake = async () => { if (!account) return; @@ -86,17 +87,17 @@ const ActiveFarmingCard = ({ ); diff --git a/src/components/position/ClosedFarmingCard/index.tsx b/src/components/position/ClosedFarmingCard/index.tsx index 0db63809..5012fd5f 100644 --- a/src/components/position/ClosedFarmingCard/index.tsx +++ b/src/components/position/ClosedFarmingCard/index.tsx @@ -26,11 +26,11 @@ const ClosedFarmingCard = ({ account: account ?? ADDRESS_ZERO, }; - const { onUnstake, isLoading: isUnstaking } = useFarmUnstake(farmingArgs); + const { onUnstake, isLoading: isUnstaking, isPending } = useFarmUnstake(farmingArgs); return ( - ); }; diff --git a/src/components/position/CollectFees/index.tsx b/src/components/position/CollectFees/index.tsx index b030a95b..bf9af481 100644 --- a/src/components/position/CollectFees/index.tsx +++ b/src/components/position/CollectFees/index.tsx @@ -48,7 +48,7 @@ const CollectFees = ({ mintInfo, positionFeesUSD, positionId }: CollectFeesProps value: BigInt(value || 0) }); - const { data: collectData, write: collect } = useContractWrite(collectConfig) + const { data: collectData, write: collect, isLoading: isPending } = useContractWrite(collectConfig) const { isLoading } = useTransactionAwait( collectData?.hash, @@ -69,8 +69,8 @@ const CollectFees = ({ mintInfo, positionFeesUSD, positionId }: CollectFeesProps {collectedFees ? {collectedFees} : } - diff --git a/src/components/position/IncreaseLiquidityButton/index.tsx b/src/components/position/IncreaseLiquidityButton/index.tsx index 88b300b6..39d96c76 100644 --- a/src/components/position/IncreaseLiquidityButton/index.tsx +++ b/src/components/position/IncreaseLiquidityButton/index.tsx @@ -82,6 +82,7 @@ export const IncreaseLiquidityButton = ({ const { approvalState: approvalStateA, approvalCallback: approvalCallbackA, + isPending: isPendingA, } = useApprove( mintInfo.parsedAmounts[Field.CURRENCY_A], ALGEBRA_POSITION_MANAGER @@ -89,6 +90,7 @@ export const IncreaseLiquidityButton = ({ const { approvalState: approvalStateB, approvalCallback: approvalCallbackB, + isPending: isPendingB, } = useApprove( mintInfo.parsedAmounts[Field.CURRENCY_B], ALGEBRA_POSITION_MANAGER @@ -122,7 +124,7 @@ export const IncreaseLiquidityButton = ({ value: BigInt(value || 0), }); - const { data: increaseLiquidityData, write: increaseLiquidity } = + const { data: increaseLiquidityData, write: increaseLiquidity, isLoading: isIncreaseLiquidityPending } = useContractWrite(increaseLiquidityConfig); const { isLoading: isIncreaseLiquidityLoading, isSuccess } = @@ -162,11 +164,13 @@ export const IncreaseLiquidityButton = ({
{showApproveA && ( ); }; diff --git a/src/components/swap/SwapButton/index.tsx b/src/components/swap/SwapButton/index.tsx index 38b57dbd..179f35ce 100644 --- a/src/components/swap/SwapButton/index.tsx +++ b/src/components/swap/SwapButton/index.tsx @@ -44,6 +44,7 @@ const SwapButton = () => { execute: onWrap, loading: isWrapLoading, inputError: wrapInputError, + isPending: isWrapPending } = useWrapCallback( currencies[SwapField.INPUT], currencies[SwapField.OUTPUT], @@ -79,7 +80,7 @@ const SwapButton = () => { const routeNotFound = !trade?.route; const isLoadingRoute = TradeState.LOADING === tradeState.state; - const { approvalState, approvalCallback } = useApproveCallbackFromTrade( + const { approvalState, approvalCallback, isPending: isApprovePending } = useApproveCallbackFromTrade( trade, allowedSlippage ); @@ -101,6 +102,7 @@ const SwapButton = () => { callback: swapCallback, error: swapCallbackError, isLoading: isSwapLoading, + isPending: isSwapPending, } = useSwapCallback(trade, allowedSlippage, approvalState); const handleSwap = useCallback(async () => { @@ -118,6 +120,8 @@ const SwapButton = () => { const isWrongChain = selectedNetworkId !== DEFAULT_CHAIN_ID; + const isPending = isSwapPending || isApprovePending || isWrapPending; + if (!account) return ; if (isWrongChain) @@ -128,6 +132,8 @@ const SwapButton = () => { >{`Connect to ${DEFAULT_CHAIN_NAME}`} ); + if (isPending) return ; + if (showWrap && wrapInputError) return ; diff --git a/src/hooks/common/useApprove.ts b/src/hooks/common/useApprove.ts index 41246096..5646a70d 100644 --- a/src/hooks/common/useApprove.ts +++ b/src/hooks/common/useApprove.ts @@ -30,7 +30,7 @@ export function useApprove(amountToApprove: CurrencyAmount | undefined ] as [Address, bigint] }) - const { data: approvalData, writeAsync: approve } = useContractWrite(config); + const { data: approvalData, writeAsync: approve, isLoading: isPending } = useContractWrite(config); const { isLoading, isSuccess } = useTransactionAwait( approvalData?.hash, @@ -43,7 +43,8 @@ export function useApprove(amountToApprove: CurrencyAmount | undefined return { approvalState: isLoading ? ApprovalState.PENDING : isSuccess && approvalState === ApprovalState.APPROVED ? ApprovalState.APPROVED : approvalState, - approvalCallback: approve + approvalCallback: approve, + isPending } } diff --git a/src/hooks/farming/useFarmApprove.ts b/src/hooks/farming/useFarmApprove.ts index b5cc8dd4..d1918952 100644 --- a/src/hooks/farming/useFarmApprove.ts +++ b/src/hooks/farming/useFarmApprove.ts @@ -19,7 +19,7 @@ export function useFarmApprove(tokenId: bigint) { args: [tokenId, APPROVE, FARMING_CENTER], }); - const { data: data, writeAsync: onApprove } = useContractWrite(config); + const { data: data, writeAsync: onApprove, isLoading: isPending } = useContractWrite(config); const { isLoading, isSuccess } = useTransactionAwait( data?.hash, @@ -42,5 +42,6 @@ export function useFarmApprove(tokenId: bigint) { isLoading, isSuccess, onApprove, + isPending }; } diff --git a/src/hooks/farming/useFarmHarvest.ts b/src/hooks/farming/useFarmHarvest.ts index f7a2740c..d42bde0c 100644 --- a/src/hooks/farming/useFarmHarvest.ts +++ b/src/hooks/farming/useFarmHarvest.ts @@ -38,7 +38,7 @@ export function useFarmHarvest({ args: [calldata], }); - const { data: data, writeAsync: onHarvest } = useContractWrite(config); + const { data: data, writeAsync: onHarvest, isLoading: isPending } = useContractWrite(config); const { isLoading, isSuccess } = useTransactionAwait( data?.hash, @@ -53,6 +53,7 @@ export function useFarmHarvest({ isLoading, isSuccess, onHarvest, + isPending }; } @@ -101,7 +102,7 @@ export function useFarmHarvestAll( args: [calldatas], }); - const { data: data, writeAsync: onHarvestAll } = useContractWrite(config); + const { data: data, writeAsync: onHarvestAll, isLoading: isPending } = useContractWrite(config); const { isLoading, isSuccess } = useTransactionAwait( data?.hash, @@ -116,5 +117,6 @@ export function useFarmHarvestAll( isLoading, isSuccess, onHarvestAll, + isPending }; } diff --git a/src/hooks/farming/useFarmStake.ts b/src/hooks/farming/useFarmStake.ts index f1ae9332..057af429 100644 --- a/src/hooks/farming/useFarmStake.ts +++ b/src/hooks/farming/useFarmStake.ts @@ -44,7 +44,7 @@ export function useFarmStake({ ], }); - const { data: data, writeAsync: onStake } = useContractWrite(config); + const { data: data, writeAsync: onStake, isLoading: isPending } = useContractWrite(config); const { isLoading, isSuccess } = useTransactionAwait( data?.hash, @@ -88,6 +88,7 @@ export function useFarmStake({ isLoading: isQueryLoading || isLoading, isSuccess, onStake, + isPending }; } @@ -147,7 +148,7 @@ export function useFarmUnstake({ args: [calldatas], }); - const { data: data, writeAsync: onUnstake } = useContractWrite(config); + const { data: data, writeAsync: onUnstake, isLoading: isPending } = useContractWrite(config); const { isLoading, isSuccess } = useTransactionAwait( data?.hash, @@ -191,5 +192,6 @@ export function useFarmUnstake({ isLoading: isLoading || isQueryLoading, isSuccess, onUnstake, + isPending }; } diff --git a/src/hooks/swap/useSwapCallback.ts b/src/hooks/swap/useSwapCallback.ts index 26d46f1b..a2c55a46 100644 --- a/src/hooks/swap/useSwapCallback.ts +++ b/src/hooks/swap/useSwapCallback.ts @@ -113,7 +113,7 @@ export function useSwapCallback( gas: bestCall ? bestCall.gasEstimate * (10000n + 2000n) / 10000n : undefined }) - const { data: swapData, writeAsync: swapCallback } = useContractWrite(swapConfig) + const { data: swapData, writeAsync: swapCallback, isLoading: isPending } = useContractWrite(swapConfig) const { isLoading, isSuccess } = useTransactionAwait( swapData?.hash, @@ -132,7 +132,8 @@ export function useSwapCallback( callback: null, error: "No trade was found", isLoading: false, - isSuccess: false + isSuccess: false, + isPending: false, } return { @@ -140,9 +141,10 @@ export function useSwapCallback( callback: swapCallback, error: null, isLoading, - isSuccess + isSuccess, + isPending, } - }, [trade, isLoading, swapCalldata, swapCallback, swapConfig, isSuccess]) + }, [trade, isLoading, swapCalldata, swapCallback, swapConfig, isSuccess, isPending]) } \ No newline at end of file diff --git a/src/hooks/swap/useWrapCallback.ts b/src/hooks/swap/useWrapCallback.ts index c921af0d..da1b2e0f 100644 --- a/src/hooks/swap/useWrapCallback.ts +++ b/src/hooks/swap/useWrapCallback.ts @@ -19,7 +19,7 @@ export default function useWrapCallback( inputCurrency: Currency | undefined, outputCurrency: Currency | undefined, typedValue: string | undefined -): { wrapType: typeof WrapType[keyof typeof WrapType]; execute?: undefined | (() => void); loading?: boolean; inputError?: string } { +): { wrapType: typeof WrapType[keyof typeof WrapType]; execute?: undefined | (() => void); loading?: boolean; inputError?: string, isPending?: boolean } { const chainId = useChainId() const { address: account } = useAccount() @@ -47,7 +47,7 @@ export default function useWrapCallback( args: inputAmount ? [BigInt(inputAmount.quotient.toString())] : undefined }) - const { data: unwrapData, write: unwrap } = useContractWrite(unwrapConfig) + const { data: unwrapData, write: unwrap, isLoading: isPending } = useContractWrite(unwrapConfig) const { isLoading: isUnwrapLoading } = useTransactionAwait( unwrapData?.hash, @@ -77,17 +77,19 @@ export default function useWrapCallback( wrapType: WrapType.WRAP, execute: sufficientBalance && inputAmount ? wrap : undefined, loading: isWrapLoading, - inputError: sufficientBalance ? undefined : hasInputAmount ? `Insufficient ${DEFAULT_NATIVE_SYMBOL} balance` : `Enter ${DEFAULT_NATIVE_SYMBOL} amount` + inputError: sufficientBalance ? undefined : hasInputAmount ? `Insufficient ${DEFAULT_NATIVE_SYMBOL} balance` : `Enter ${DEFAULT_NATIVE_SYMBOL} amount`, + isPending, } } else if (weth.equals(inputCurrency) && outputCurrency.isNative) { return { wrapType: WrapType.UNWRAP, execute: sufficientBalance && inputAmount ? unwrap : undefined, loading: isUnwrapLoading, - inputError: sufficientBalance ? undefined : hasInputAmount ? `Insufficient W${DEFAULT_NATIVE_SYMBOL} balance` : `Enter W${DEFAULT_NATIVE_SYMBOL} amount` + inputError: sufficientBalance ? undefined : hasInputAmount ? `Insufficient W${DEFAULT_NATIVE_SYMBOL} balance` : `Enter W${DEFAULT_NATIVE_SYMBOL} amount`, + isPending, } } else { return NOT_APPLICABLE } - }, [chainId, inputCurrency, outputCurrency, inputAmount, balance, isWrapLoading, isUnwrapLoading, wrap, unwrap]) + }, [chainId, inputCurrency, outputCurrency, inputAmount, balance, isWrapLoading, isUnwrapLoading, wrap, unwrap, isPending]) } \ No newline at end of file