From 521fc97e0d7c36f2add3efeb3f99df102d0f8c66 Mon Sep 17 00:00:00 2001
From: fiqriBTI <fikri.dev@btigroup.ee>
Date: Sat, 15 Nov 2025 11:41:49 +0700
Subject: [PATCH] fix: create pool service

---
 .../liquidity-pools/create-pool/page.tsx      | 14 ++++++--
 .../liquidity-pools/deposit/[poolId]/page.tsx |  7 ++++
 .../liquidity-pools/detail/[poolId]/page.tsx  | 36 +++++++------------
 src/features/liquidityPool/services.ts        | 31 +++++++++++++---
 4 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/src/app/(walletConnected)/liquidity-pools/create-pool/page.tsx b/src/app/(walletConnected)/liquidity-pools/create-pool/page.tsx
index e487700..2327834 100644
--- a/src/app/(walletConnected)/liquidity-pools/create-pool/page.tsx
+++ b/src/app/(walletConnected)/liquidity-pools/create-pool/page.tsx
@@ -44,7 +44,6 @@ import { TCreatePoolPayload, MintInfo } from '@/features/liquidityPool/types'
 import {
 	isBBAPool,
 	getBBAPositionInPool,
-	requiresBBAWrapping
 } from '@/features/liquidityPool/utils'
 import { createPoolValidation } from '@/features/liquidityPool/validation'
 import { LoadingDialog } from '@/features/nfts/components/StatusDialog'
@@ -393,6 +392,11 @@ export default function CreatePool() {
 		setIsTokenDialogOpen(true)
 	}, [])
 
+	const resetTokenAmounts = useCallback(() => {
+		form.setValue('baseTokenAmount', '')
+		form.setValue('quoteTokenAmount', '')
+	}, [form])
+
 	// Auto-calculate quote amount based on price ratio
 	// Initial Price format: "X BaseToken per QuoteToken"
 	// Example: "1000 SHIB per USDT" means 1 USDT = 1000 SHIB, so 1 SHIB = 1/1000 USDT
@@ -400,6 +404,8 @@ export default function CreatePool() {
 		(value: string) => {
 			form.setValue('baseTokenAmount', value, { shouldValidate: true })
 
+			if(value === '') return resetTokenAmounts()
+			
 			// Auto-calculate quote amount if both tokens and initial price are set
 			const initialPrice = parseFloat(form.getValues('initialPrice'))
 			if (initialPrice && value && selectedBaseToken && selectedQuoteToken) {
@@ -409,13 +415,15 @@ export default function CreatePool() {
 				form.setValue('quoteTokenAmount', quoteAmount.toString(), { shouldValidate: true })
 			}
 		},
-		[form, selectedBaseToken, selectedQuoteToken]
+		[form, resetTokenAmounts, selectedBaseToken, selectedQuoteToken]
 	)
 
 	const handleQuoteAmountChange = useCallback(
 		(value: string) => {
 			form.setValue('quoteTokenAmount', value, { shouldValidate: true })
 
+			if (value === '') return resetTokenAmounts()
+
 			// Auto-calculate base amount if both tokens and initial price are set
 			const initialPrice = parseFloat(form.getValues('initialPrice'))
 			if (initialPrice && value && selectedBaseToken && selectedQuoteToken) {
@@ -425,7 +433,7 @@ export default function CreatePool() {
 				form.setValue('baseTokenAmount', baseAmount.toString(), { shouldValidate: true })
 			}
 		},
-		[form, selectedBaseToken, selectedQuoteToken]
+		[form, resetTokenAmounts, selectedBaseToken, selectedQuoteToken]
 	)
 
 	// Show loading state for tokens
diff --git a/src/app/(walletConnected)/liquidity-pools/deposit/[poolId]/page.tsx b/src/app/(walletConnected)/liquidity-pools/deposit/[poolId]/page.tsx
index 8a0a6ef..cd9a4f6 100644
--- a/src/app/(walletConnected)/liquidity-pools/deposit/[poolId]/page.tsx
+++ b/src/app/(walletConnected)/liquidity-pools/deposit/[poolId]/page.tsx
@@ -148,13 +148,20 @@ export default function LiquidityPoolDeposit({ params }: { params: { poolId: str
 		!hasInsufficientBalanceB &&
 		!depositMutation.isPending
 
+	const resetValue = () => {
+		setFromAmount('')
+		setToAmount('')
+	}
+
 	const handleFromAmountChange = (value: string) => {
 		setFromAmount(value)
+		if (value === '') return resetValue()
 		setLastChangedField('from')
 	}
 
 	const handleToAmountChange = (value: string) => {
 		setToAmount(value)
+		if (value === '') return resetValue()
 		setLastChangedField('to')
 	}
 
diff --git a/src/app/(walletConnected)/liquidity-pools/detail/[poolId]/page.tsx b/src/app/(walletConnected)/liquidity-pools/detail/[poolId]/page.tsx
index 0a60a92..b2e6002 100644
--- a/src/app/(walletConnected)/liquidity-pools/detail/[poolId]/page.tsx
+++ b/src/app/(walletConnected)/liquidity-pools/detail/[poolId]/page.tsx
@@ -137,7 +137,6 @@ export default function PoolDetail({ params }: { params: { poolId: string } }) {
 	const router = useRouter()
 	const poolId = params.poolId
 
-	const [isInitialLoad, setIsInitialLoad] = useState<boolean>(true)
 	const [isOwnerTab, setIsOwnerTab] = useState<boolean>(false)
 	const isMobile = useIsMobile()
 
@@ -182,16 +181,7 @@ export default function PoolDetail({ params }: { params: { poolId: string } }) {
 		}
 	}, [getTransactionsByPoolId.error, getTransactionsByPoolId.isError])
 
-	useEffect(() => {
-		if (!(getPoolById.isLoading || getTransactionsByPoolId.isLoading)) {
-			setIsInitialLoad(false)
-		}
-	}, [getPoolById.isLoading, getTransactionsByPoolId.isLoading])
-
-	if (
-		isInitialLoad &&
-		(getPoolById.isLoading || getTransactionsByPoolId.isLoading || getUserStats.isLoading)
-	)
+	if (getPoolById.isLoading || getTransactionsByPoolId.isLoading || getUserStats.isLoading)
 		return (
 			<div className="w-full mx-auto 2xl:max-w-7xl lg:max-w-5xl md:max-w-2xl px-[15px]">
 				<Button
@@ -216,7 +206,7 @@ export default function PoolDetail({ params }: { params: { poolId: string } }) {
 				<HiOutlineArrowNarrowLeft />
 				<h4>Pools</h4>
 			</Button>
-			{getPoolById.isLoading ? (
+			{getPoolById.isRefetching ? (
 				<div className="flex flex-wrap items-center justify-between gap-4">
 					<div className="flex items-center gap-2">
 						<Skeleton className="h-7 w-7 rounded-full" />
@@ -340,33 +330,33 @@ export default function PoolDetail({ params }: { params: { poolId: string } }) {
 								mintBAmount={mintBAmount}
 								mintASymbol={pool?.mintA?.symbol ?? ''}
 								mintBSymbol={pool?.mintB?.symbol ?? ''}
-								isLoading={getPoolById.isLoading}
+								isLoading={getPoolById.isRefetching}
 							/>
 						</div>
 						<div className="md:mt-6 mt-3 grid grid-cols-2 lg:flex lg:gap-y-0 gap-y-3  items-center justify-between">
 							<StatsItem
-								isLoading={getPoolById.isLoading}
+								isLoading={getPoolById.isRefetching}
 								title="APR(7 days)"
 								info="Weekly Percentage Rate earned by liquidity providers from trading fees and rewards."
 								content={`${pool?.apr24h.toFixed(2) ?? 0.0}%`}
 							/>
 							<hr className="w-px h-12 lg:block hidden bg-light-grey border-0" />
 							<StatsItem
-								isLoading={getPoolById.isLoading}
+								isLoading={getPoolById.isRefetching}
 								title="TVL"
 								info="The total dollar value of assets locked in this liquidity pool."
 								content={`$${pool?.tvl.toLocaleString() ?? 0}`}
 							/>
 							<hr className="w-px h-12 lg:block hidden bg-light-grey border-0" />
 							<StatsItem
-								isLoading={getPoolById.isLoading}
+								isLoading={getPoolById.isRefetching}
 								title="Fees(24h)"
 								info="Trading fees generated by this pool in the past 24 hours."
 								content={`$${pool?.fees24h.toFixed(3) ?? 0}`}
 							/>
 							<hr className="w-px h-12 lg:block hidden bg-light-grey border-0" />
 							<StatsItem
-								isLoading={getPoolById.isLoading}
+								isLoading={getPoolById.isRefetching}
 								title="Volume(24h)"
 								info="Total swap volume (trades) processed in this pool within the last 24 hours."
 								content={`$${pool?.volume24h.toFixed(3) ?? 0}`}
@@ -462,33 +452,33 @@ export default function PoolDetail({ params }: { params: { poolId: string } }) {
 								mintBAmount={userStats?.userReserveB ?? 0}
 								mintASymbol={pool?.mintA?.symbol ?? ''}
 								mintBSymbol={pool?.mintB?.symbol ?? ''}
-								isLoading={getUserStats.isLoading}
+								isLoading={getUserStats.isRefetching}
 							/>
 						</div>
 						<div className="md:mt-6 mt-3 grid grid-cols-2 lg:flex lg:gap-y-0 gap-y-3  items-center justify-between">
 							<StatsItem
-								isLoading={getUserStats.isLoading}
+								isLoading={getUserStats.isRefetching}
 								title="My Pool Share (%)"
 								info="This is the percentage of the total liquidity pool that you currently own."
 								content={`${((userStats?.userShare ?? 0) * 100).toFixed(2)}%`}
 							/>
 							<hr className="w-px h-12 lg:block hidden bg-light-grey border-0" />
 							<StatsItem
-								isLoading={getUserStats.isLoading}
+								isLoading={getUserStats.isRefetching}
 								title="My Liquidity Value"
 								info="The estimated dollar value of the tokens you've contributed to this pool."
 								content={`$${userStats?.userReserveTotalPrice.toLocaleString() ?? 0}`}
 							/>
 							<hr className="w-px h-12 lg:block hidden bg-light-grey border-0" />
 							<StatsItem
-								isLoading={getUserStats.isLoading}
+								isLoading={getUserStats.isRefetching}
 								title="LP Tokens Held"
 								info="The total number of LP (liquidity provider) tokens you own — including both staked and unstaked."
 								content={`${userStats?.userLPToken.toLocaleString() ?? 0} LP`}
 							/>
 							<hr className="w-px h-12 lg:block hidden bg-light-grey border-0" />
 							<StatsItem
-								isLoading={getUserStats.isLoading}
+								isLoading={getUserStats.isRefetching}
 								title="Fee Earnings(24h)"
 								info="Total amount you've earned from trading fees within the last 24 hours."
 								content={`$${userStats?.dailyFeeEarnings.toFixed(3) ?? 0}`}
@@ -499,7 +489,7 @@ export default function PoolDetail({ params }: { params: { poolId: string } }) {
 			</div>
 			<div className="flex flex-col md:space-y-6 space-y-3 md:mt-14 mt-5">
 				<h2 className="font-semibold lg:text-2xl text-xl text-main-black">Transactions</h2>
-				{getTransactionsByPoolId.isLoading ? (
+				{getTransactionsByPoolId.isRefetching ? (
 					<PoolDetailTransactionSkeleton />
 				) : (
 					<TransactionDataTable
diff --git a/src/features/liquidityPool/services.ts b/src/features/liquidityPool/services.ts
index 4874820..b6a24ef 100644
--- a/src/features/liquidityPool/services.ts
+++ b/src/features/liquidityPool/services.ts
@@ -71,7 +71,7 @@ export const useGetPools = () => {
 	const getAllTokenPrices = useGetAllTokenPrices()
 	const allTokenPrices = getAllTokenPrices.data
 	const getPoolsWithPrices = useQuery<TGetPoolsResponse>({
-		queryKey: [SERVICES_KEY.POOL.GET_POOLS, allTokenPrices],
+		queryKey: [SERVICES_KEY.POOL.GET_POOLS],
 		queryFn: async () => {
 			const poolAccounts = await getPoolAccounts(connection)
 			const batchSize = 10
@@ -122,7 +122,7 @@ export const useGetPoolById = ({ poolId }: { poolId: string }) => {
 	const allTokenPrices = getAllTokenPrices.data
 
 	const getPoolWithPricesQuery = useQuery<TGetPoolByIdResponse>({
-		queryKey: [SERVICES_KEY.POOL.GET_POOL_BY_ID, poolId, allTokenPrices],
+		queryKey: [SERVICES_KEY.POOL.GET_POOL_BY_ID, poolId],
 		queryFn: async () => {
 			const pubKey = new PublicKey(poolId)
 			const accountInfo = await connection.getAccountInfo(pubKey)
@@ -805,6 +805,14 @@ export const useCreatePool = () => {
 							baseAmountDaltons
 						)
 
+						// transaction approval
+						const approveIx = createApproveInstruction(
+							userBaseTokenAccount,
+							ownerAddress,
+							ownerAddress,
+							baseAmountDaltons
+						)
+
 						// Transfer BBA to pool (using special BBA handling)
 						console.log('🔄 Transferring BBA to pool account...')
 						const transferBBAIx = SystemProgram.transfer({
@@ -817,7 +825,12 @@ export const useCreatePool = () => {
 						const syncBBAIx = createSyncNativeInstruction(swapTokenBAccount)
 
 						// Combine all transfers
-						const liquidityTx = new Transaction().add(transferBaseIx, transferBBAIx, syncBBAIx)
+						const liquidityTx = new Transaction().add(
+							approveIx,
+							transferBaseIx,
+							transferBBAIx,
+							syncBBAIx
+						)
 						const liquiditySig = await sendTransactionWithRetry(
 							liquidityTx,
 							connection,
@@ -891,8 +904,16 @@ export const useCreatePool = () => {
 						quoteAmountDaltons
 					)
 
+					// approval instruction
+					const approveIx = createApproveInstruction(
+						userQuoteTokenAccount,
+						ownerAddress,
+						ownerAddress,
+						baseAmountDaltons
+					)
+
 					// Send initial liquidity transfer
-					const liquidityTx = new Transaction().add(transferBaseIx, transferQuoteIx)
+					const liquidityTx = new Transaction().add(approveIx, transferBaseIx, transferQuoteIx)
 					const liquiditySig = await sendTransactionWithRetry(
 						liquidityTx,
 						connection,
@@ -1454,7 +1475,7 @@ export const useDepositToPool = () => {
 			try {
 				const signature = await sendTransaction(transaction, connection, {
 					skipPreflight: false,
-					preflightCommitment: 'confirmed',
+					preflightCommitment: 'confirmed'
 				})
 				console.log('✅ Transaction sent successfully:', signature)