cryptoalgebra · damnnou · May 30, 2024
diff --git 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 ? (
                     <Loader />
                 ) : isSameToken ? (
                     'Select another pair'

diff --git a/src/components/create-position/AddLiquidityButton/index.tsx b/src/components/create-position/AddLiquidityButton/index.tsx
@@ -76,13 +76,15 @@ export const AddLiquidityButton = ({
     const {
         approvalState: approvalStateA,
         approvalCallback: approvalCallbackA,
+        isPending: isPendingA,
     } = useApprove(
         mintInfo.parsedAmounts[Field.CURRENCY_A],
         ALGEBRA_POSITION_MANAGER
     );
     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 = ({
             <div className="flex w-full gap-2">
                 {showApproveA && (
                     <Button
-                        disabled={approvalStateA === ApprovalState.PENDING}
+                        disabled={approvalStateA === ApprovalState.PENDING || isPendingA}
                         className="w-full"
                         onClick={() => approvalCallbackA && approvalCallbackA()}
                     >
-                        {approvalStateA === ApprovalState.PENDING ? (
+                        {isPendingA ? (
+                            'Signing...'
+                        ) : approvalStateA === ApprovalState.PENDING ? (
                             <Loader />
                         ) : (
                             `Approve ${mintInfo.currencies.CURRENCY_A?.symbol}`
@@ -163,11 +167,13 @@ export const AddLiquidityButton = ({
                 )}
                 {showApproveB && (
                     <Button
-                        disabled={approvalStateB === ApprovalState.PENDING}
+                        disabled={approvalStateB === ApprovalState.PENDING || isPendingB}
                         className="w-full"
                         onClick={() => approvalCallbackB && approvalCallbackB()}
                     >
-                        {approvalStateB === ApprovalState.PENDING ? (
+                        {isPendingB ? (
+                            'Signing...'
+                        ) : approvalStateB === ApprovalState.PENDING ? (
                             <Loader />
                         ) : (
                             `Approve ${mintInfo.currencies.CURRENCY_B?.symbol}`
@@ -179,10 +185,10 @@ export const AddLiquidityButton = ({
 
     return (
         <Button
-            disabled={!isReady}
+            disabled={!isReady || isAddLiquidityPending || isAddingLiquidityLoading}
             onClick={() => addLiquidity && addLiquidity()}
         >
-            {isAddingLiquidityLoading ? <Loader /> : 'Create Position'}
+            {isAddLiquidityPending ? 'Signing...' : isAddingLiquidityLoading ? <Loader /> : 'Create Position'}
         </Button>
     );
 };

diff --git 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 ? <Loader /> : 'Collect Rewards'}
+                        {isHarvestPending ? 'Signing...' : isLoading ? <Loader /> : 'Collect Rewards'}
                     </Button>
                     <SelectPositionFarmModal
                         isHarvestLoading={isLoading}

diff --git a/src/components/modals/RemoveLiquidityModal/index.tsx b/src/components/modals/RemoveLiquidityModal/index.tsx
@@ -82,7 +82,7 @@ const RemoveLiquidityModal = ({ positionId }: RemoveLiquidityModalProps) => {
         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) => {
                 />
 
                 <Button disabled={isDisabled} onClick={() => removeLiquidity && removeLiquidity()}>
-                    {isRemoveLoading ? <Loader /> : 'Remove Liquidity'}
+                    {isPending ? 'Signing...' : isRemoveLoading ? <Loader /> : 'Remove Liquidity'}
                 </Button>
 
             </div>

diff --git 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 ? (
                         <>
                             <Button
-                                disabled={approved || isApproveLoading}
+                                disabled={approved || isApproveLoading || isApprovePending}
                                 className="w-1/2"
                                 onClick={handleApprove}
                             >
-                                {approved ? (
+                                {isApprovePending ? (
+                                    <span>Signing...</span>
+                                ) : approved ? (
                                     <span>1. Approved</span>
                                 ) : isApproveLoading ? (
                                     <Loader />
@@ -143,11 +145,11 @@ export function SelectPositionFarmModal({
                                 )}
                             </Button>
                             <Button
-                                disabled={!approved || isStakeLoading}
+                                disabled={!approved || isStakeLoading || isStakePending}
                                 className="w-1/2"
                                 onClick={handleStake}
                             >
-                                {isStakeLoading ? <Loader /> : '2. Deposit'}
+                                {isStakePending ? 'Signing...' : isStakeLoading ? <Loader /> : '2. Deposit'}
                             </Button>
                         </>
                     ) : (

diff --git 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 = ({
                 </div>
                 <Button
                     size={'md'}
-                    disabled={isHarvesting || isUnstaking}
+                    disabled={isHarvesting || isUnstaking || isHarvestPending || isUnstakePending}
                     onClick={handleHarvest}
                 >
-                    {isHarvesting ? <Loader /> : 'Collect'}
+                    {isHarvesting || isHarvestPending ? <Loader /> : 'Collect'}
                 </Button>
             </div>
             <Button
                 onClick={handleUnstake}
-                disabled={isUnstaking || isHarvesting}
+                disabled={isUnstaking || isHarvesting || isUnstakePending}
             >
-                {isUnstaking ? <Loader /> : 'Exit from farming'}
+                {isUnstakePending ? 'Signing...' : isUnstaking ? <Loader /> : 'Exit from farming'}
             </Button>
         </div>
     );

diff --git 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 (
-        <Button disabled={isUnstaking} onClick={onUnstake}>
-            {isUnstaking ? <Loader /> : 'Exit from farming'}
+        <Button disabled={isUnstaking || isPending} onClick={onUnstake}>
+            {isPending ? 'Signing...' : isUnstaking ? <Loader /> : 'Exit from farming'}
         </Button>
     );
 };

diff --git 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 ? <span className="text-cyan-300 drop-shadow-cyan">{collectedFees}</span> : <Skeleton className="w-[100px] h-[30px]" />}
             </div>
         </div>
-        <Button size={'md'} disabled={!collect || zeroRewards || isLoading} onClick={() => collect && collect()}>
-            {isLoading ? <Loader /> : 'Collect fees'}
+        <Button size={'md'} disabled={!collect || zeroRewards || isLoading || isPending} onClick={() => collect && collect()}>
+            {isPending || isLoading ? <Loader /> : 'Collect fees'}
         </Button>
     </div>
 

diff --git a/src/components/position/IncreaseLiquidityButton/index.tsx b/src/components/position/IncreaseLiquidityButton/index.tsx
@@ -82,13 +82,15 @@ export const IncreaseLiquidityButton = ({
     const {
         approvalState: approvalStateA,
         approvalCallback: approvalCallbackA,
+        isPending: isPendingA,
     } = useApprove(
         mintInfo.parsedAmounts[Field.CURRENCY_A],
         ALGEBRA_POSITION_MANAGER
     );
     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 = ({
             <div className="flex w-full gap-2">
                 {showApproveA && (
                     <Button
-                        disabled={approvalStateA === ApprovalState.PENDING}
+                        disabled={approvalStateA === ApprovalState.PENDING || isPendingA}
                         className="w-full"
                         onClick={() => approvalCallbackA && approvalCallbackA()}
                     >
-                        {approvalStateA === ApprovalState.PENDING ? (
+                        {isPendingA ? (
+                            'Signing...'
+                        ) : approvalStateA === ApprovalState.PENDING ? (
                             <Loader />
                         ) : (
                             `Approve ${mintInfo.currencies.CURRENCY_A?.symbol}`
@@ -175,11 +179,13 @@ export const IncreaseLiquidityButton = ({
                 )}
                 {showApproveB && (
                     <Button
-                        disabled={approvalStateB === ApprovalState.PENDING}
+                        disabled={approvalStateB === ApprovalState.PENDING || isPendingB}
                         className="w-full"
                         onClick={() => approvalCallbackB && approvalCallbackB()}
                     >
-                        {approvalStateB === ApprovalState.PENDING ? (
+                        {isPendingB ? (
+                            'Signing...'
+                        ) : approvalStateB === ApprovalState.PENDING ? (
                             <Loader />
                         ) : (
                             `Approve ${mintInfo.currencies.CURRENCY_B?.symbol}`
@@ -191,10 +197,10 @@ export const IncreaseLiquidityButton = ({
 
     return (
         <Button
-            disabled={!isReady || isIncreaseLiquidityLoading}
+            disabled={!isReady || isIncreaseLiquidityLoading || isIncreaseLiquidityPending}
             onClick={() => increaseLiquidity && increaseLiquidity()}
         >
-            {isIncreaseLiquidityLoading ? <Loader /> : 'Add Liquidity'}
+            {isIncreaseLiquidityPending ? 'Signing...' : isIncreaseLiquidityLoading ? <Loader /> : 'Add Liquidity'}
         </Button>
     );
 };

diff --git 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 <Button onClick={() => open()}>Connect Wallet</Button>;
 
     if (isWrongChain)
@@ -128,6 +132,8 @@ const SwapButton = () => {
             >{`Connect to ${DEFAULT_CHAIN_NAME}`}</Button>
         );
 
+    if (isPending) return <Button disabled>Signing...</Button>;
+
     if (showWrap && wrapInputError)
         return <Button disabled>{wrapInputError}</Button>;
 

diff --git a/src/hooks/common/useApprove.ts b/src/hooks/common/useApprove.ts
@@ -30,7 +30,7 @@ export function useApprove(amountToApprove: CurrencyAmount<Currency> | 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<Currency> | undefined
 
     return {
         approvalState: isLoading ? ApprovalState.PENDING : isSuccess && approvalState === ApprovalState.APPROVED ? ApprovalState.APPROVED : approvalState,
-        approvalCallback: approve
+        approvalCallback: approve,
+        isPending
     }
 
 }