Skip to content

feat: new flow done #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fiqriBTI merged 3 commits into from
Nov 30, 2025
Merged

feat: new flow done #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a47d75f
feat: new flow done
fiqriBTI Nov 23, 2025
1bbd8d4
fix: create token connect wallet button to correct type
fiqriBTI Nov 24, 2025
2ce7a55
fix: set back standalone output
fiqriBTI Nov 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 0 additions & 52 deletions src/app/(walletConnected)/layout.tsx
View file
Open in desktop

This file was deleted.

121 changes: 64 additions & 57 deletions ...ted)/liquidity-pools/create-pool/page.tsx → src/app/liquidity-pools/create-pool/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
'use client'

import { useWallet } from '@bbachain/wallet-adapter-react'
import { zodResolver } from '@hookform/resolvers/zod'
import { ChevronDown, ArrowLeft, ArrowRight, Info, Loader2, AlertCircle } from 'lucide-react'
import Image from 'next/image'
import { useEffect, useState, useCallback } from 'react'
import { useForm } from 'react-hook-form'
import toast from 'react-hot-toast'
import { CiWallet } from 'react-icons/ci'
import { FaChartArea } from 'react-icons/fa'
import { FaPlus } from 'react-icons/fa6'
import { IoSettings } from 'react-icons/io5'

import { NoBalanceAlert } from '@/components/common/Alert'
import { Button } from '@/components/ui/button'
import {
Card,
Expand Down Expand Up @@ -41,10 +42,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
import LPSuccessDialog from '@/features/liquidityPool/components/LPSuccessDialog'
import { useCreatePool } from '@/features/liquidityPool/services'
import { TCreatePoolPayload, MintInfo } from '@/features/liquidityPool/types'
import {
isBBAPool,
getBBAPositionInPool,
} from '@/features/liquidityPool/utils'
import { isBBAPool, getBBAPositionInPool } from '@/features/liquidityPool/utils'
import { createPoolValidation } from '@/features/liquidityPool/validation'
import { LoadingDialog } from '@/features/nfts/components/StatusDialog'
import SwapItem from '@/features/swap/components/SwapItem'
Expand All @@ -57,8 +55,8 @@ import { getCoinGeckoId } from '@/lib/token'
import { formatTokenBalance } from '@/lib/token'
import { cn } from '@/lib/utils'
import { useGetTokenBalanceByMint } from '@/services/wallet'
import { useGetBBABalance } from '@/services/wallet'
import { useErrorDialog } from '@/stores/errorDialog'
import { useWalletListDialog } from '@/stores/walletDialog'

// Enhanced step configuration
const createPoolSteps = [
Expand Down Expand Up @@ -159,11 +157,9 @@ function TokenSelectionCard({
}

export default function CreatePool() {
// Hooks
const getTokensQuery = useGetTradeableTokens()
const createPoolMutation = useCreatePool()
const getBalanceQuery = useGetBBABalance()
const { openErrorDialog } = useErrorDialog()
const openErrorDialog = useErrorDialog((state) => state.openErrorDialog)

// Form setup
const form = useForm<TCreatePoolPayload>({
Expand All @@ -183,6 +179,10 @@ export default function CreatePool() {
}
})

const { publicKey: ownerAddress } = useWallet()
const isWalletConnected = Boolean(ownerAddress)
const openWalletList = useWalletListDialog((state) => state.openWalletList)

// States
const [currentStep, setCurrentStep] = useState<number>(0)
const [isTokenDialogOpen, setIsTokenDialogOpen] = useState<boolean>(false)
Expand All @@ -193,7 +193,6 @@ export default function CreatePool() {
const createPoolResponse = createPoolMutation.data?.data
const selectedBaseToken = form.watch('baseToken')
const selectedQuoteToken = form.watch('quoteToken')
const isNoBalance = getBalanceQuery.isError || !getBalanceQuery.data || getBalanceQuery.data === 0

// BBA Pool Detection
const isBBAPoolPair =
Expand Down Expand Up @@ -404,8 +403,8 @@ export default function CreatePool() {
(value: string) => {
form.setValue('baseTokenAmount', value, { shouldValidate: true })

if(value === '') return resetTokenAmounts()
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) {
Expand Down Expand Up @@ -436,20 +435,14 @@ export default function CreatePool() {
[form, resetTokenAmounts, selectedBaseToken, selectedQuoteToken]
)

// Show loading state for tokens

return (
<div className="max-w-4xl mx-auto md:px-0 px-[15px] flex flex-col space-y-14">
{/* Show balance alert if needed */}
{isNoBalance && <NoBalanceAlert />}

<div className="text-center flex flex-col space-y-3 ">
<h1 className="md:text-[45px] text-xl font-bold text-main-black">Create Liquidity Pool</h1>
<p className="text-xs md:text-lg text-dark-grey">
Create a new liquidity pool for token trading on BBAChain
</p>
</div>

<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 md:space-y-6">
{/* Progress Line */}
Expand Down Expand Up @@ -1028,45 +1021,59 @@ export default function CreatePool() {
)}

{/* Navigation Buttons */}
<CardFooter className="flex justify-between items-center w-full py-0 md:px-3 px-0">
<Button
type="button"
variant="ghost"
onClick={onPrev}
disabled={currentStep === 0 || createPoolMutation.isPending}
className="flex items-center space-x-2 py-1 px-3 h-10 max-w-28 w-full text-sm md:text-base"
>
<ArrowLeft className="w-3 h-3 md:w-4 md:h-4" />
<span className="hidden sm:inline">Previous</span>
<span className="sm:hidden">Prev</span>
</Button>
<Button
type="button"
onClick={onNext}
disabled={
createPoolMutation.isPending || (currentStep === 3 && !form.formState.isValid)
}
className="flex items-center rounded-[26px] space-x-2 py-1 px-3 h-10 max-w-36 w-full text-sm md:text-base bg-main-green hover:bg-hover-green disabled:opacity-50 disabled:cursor-not-allowed"
>
{createPoolMutation.isPending ? (
<>
<Loader2 className="w-3 h-3 md:w-4 md:h-4 animate-spin" />
<span className="hidden sm:inline">Creating Pool...</span>
<span className="sm:hidden">Creating...</span>
</>
) : currentStep === createPoolSteps.length - 1 ? (
<>
<span>Create Pool</span>
<ArrowRight className="w-3 h-3 md:w-4 md:h-4" />
</>
) : (
<>
<span className="hidden sm:inline">Next</span>
<span className="sm:hidden">Next</span>
<ArrowRight className="w-3 h-3 md:w-4 md:h-4" />
</>
)}
</Button>
<CardFooter className="flex justify-between items-center w-full py-0 px-0">
{isWalletConnected ? (
<>
<Button
type="button"
variant="ghost"
onClick={onPrev}
disabled={currentStep === 0 || createPoolMutation.isPending}
className="flex items-center space-x-2 py-1 px-3 h-10 max-w-28 w-full text-sm md:text-base"
>
<ArrowLeft className="w-3 h-3 md:w-4 md:h-4" />
<span className="hidden sm:inline">Previous</span>
<span className="sm:hidden">Prev</span>
</Button>
<Button
type="button"
onClick={onNext}
disabled={
createPoolMutation.isPending ||
(currentStep === 3 && !form.formState.isValid)
}
className="flex items-center rounded-[26px] space-x-2 py-1 px-3 h-10 max-w-36 w-full text-sm md:text-base bg-main-green hover:bg-hover-green disabled:opacity-50 disabled:cursor-not-allowed"
>
{createPoolMutation.isPending ? (
<>
<Loader2 className="w-3 h-3 md:w-4 md:h-4 animate-spin" />
<span className="hidden sm:inline">Creating Pool...</span>
<span className="sm:hidden">Creating...</span>
</>
) : currentStep === createPoolSteps.length - 1 ? (
<>
<span>Create Pool</span>
<ArrowRight className="w-3 h-3 md:w-4 md:h-4" />
</>
) : (
<>
<span className="hidden sm:inline">Next</span>
<span className="sm:hidden">Next</span>
<ArrowRight className="w-3 h-3 md:w-4 md:h-4" />
</>
)}
</Button>
</>
) : (
<Button
type="button"
onClick={openWalletList}
className="bg-main-green hover:bg-hover-green w-full h-10 text-main-white py-3 rounded-[45px] text-lg font-normal"
>
<CiWallet width={18} height={18} />
Connect Wallet
</Button>
)}
</CardFooter>
</Card>
</section>
Expand Down
76 changes: 47 additions & 29 deletions ...liquidity-pools/deposit/[poolId]/page.tsx → src/app/liquidity-pools/deposit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
'use client'

import { useWallet } from '@bbachain/wallet-adapter-react'
import { Loader2 } from 'lucide-react'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
import { useRouter, useSearchParams } from 'next/navigation'
import { useState, useEffect } from 'react'
import toast from 'react-hot-toast'
import { CiWallet } from 'react-icons/ci'
import { HiOutlineArrowNarrowLeft } from 'react-icons/hi'
import { HiOutlineAdjustmentsHorizontal } from 'react-icons/hi2'
import { IoCheckmarkCircle } from 'react-icons/io5'
Expand All @@ -30,6 +32,7 @@ import { useGetTokenPriceByCoinGeckoId } from '@/features/tokens/services'
import { formatTokenBalance, getCoinGeckoId } from '@/lib/token'
import { cn } from '@/lib/utils'
import { useGetTokenBalanceByMint } from '@/services/wallet'
import { useWalletListDialog } from '@/stores/walletDialog'

const initialTokeProps: MintInfo = {
chainId: 101,
Expand All @@ -43,8 +46,9 @@ const initialTokeProps: MintInfo = {
extensions: {}
}

export default function LiquidityPoolDeposit({ params }: { params: { poolId: string } }) {
const poolId = params.poolId
export default function LiquidityPoolDeposit() {
const searchParams = useSearchParams()
const poolId = searchParams.get('poolId') ?? ''
const router = useRouter()

const getPoolByIdQuery = useGetPoolById({ poolId })
Expand All @@ -53,6 +57,10 @@ export default function LiquidityPoolDeposit({ params }: { params: { poolId: str
const getUserPoolStats = useGetUserPoolStats({ pool: poolDetailData })
const userStatsData = getUserPoolStats.data?.data

const openWalletList = useWalletListDialog((state) => state.openWalletList)
const { publicKey: ownerAddress } = useWallet()
const isWalletConnected = Boolean(ownerAddress)

const [fromAmount, setFromAmount] = useState<string>('')
const [toAmount, setToAmount] = useState<string>('')
const [slippage, setSlippage] = useState<number>(1)
Expand Down Expand Up @@ -320,14 +328,16 @@ export default function LiquidityPoolDeposit({ params }: { params: { poolId: str
<Button
type="button"
size="lg"
className={cn(
'rounded-[26px] h-12 text-lg font-medium text-main-white py-3 w-full transition-all',
canDeposit ? 'bg-main-green hover:bg-hover-green ' : 'bg-light-grey'
)}
disabled={!canDeposit}
onClick={handleDeposit}
className="rounded-[26px] bg-main-green hover:bg-hover-green h-12 text-lg font-medium text-main-white py-3 w-full transition-all"
disabled={isWalletConnected && !canDeposit}
onClick={!isWalletConnected ? openWalletList : handleDeposit}
>
{depositMutation.isPending ? (
{!isWalletConnected ? (
<div className="flex items-center gap-2">
<CiWallet width={18} height={18} />
Connect Wallet
</div>
) : depositMutation.isPending ? (
<div className="flex items-center gap-2">
<Loader2 className="animate-spin" />
Depositing...
Expand Down Expand Up @@ -406,25 +416,33 @@ export default function LiquidityPoolDeposit({ params }: { params: { poolId: str
</Card>
<Card className="md:w-80 w-full border-hover-green border-[1px] rounded-[12px] p-6 drop-shadow-lg">
<CardContent className="p-0 flex flex-col space-y-[18px]">
<div className="flex justify-between items-center font-normal text-sm text-dark-grey">
<h4>My Position</h4>
{getUserPoolStats.isLoading ? (
<Skeleton className="h-4 w-12" />
) : (
<p>${userStatsData?.userReserveTotalPrice.toLocaleString()}</p>
)}
</div>
<div className="flex flex-col space-y-3 text-dark-grey">
<h3 className="text-main-black">LP Token Balances</h3>
<div className="flex items-center justify-between">
<h4>Staked/Unstaked</h4>
{getUserPoolStats.isLoading ? (
<Skeleton className="h-4 w-12" />
) : (
<p>{userStatsData?.userLPToken} LP</p>
)}
</div>
</div>
{isWalletConnected ? (
<>
<div className="flex justify-between items-center font-normal text-sm text-dark-grey">
<h4>My Position</h4>
{getUserPoolStats.isLoading ? (
<Skeleton className="h-4 w-12" />
) : (
<p>${userStatsData?.userReserveTotalPrice.toLocaleString()}</p>
)}
</div>
<div className="flex flex-col space-y-3 text-dark-grey">
<h3 className="text-main-black">LP Token Balances</h3>
<div className="flex items-center justify-between">
<h4>Staked/Unstaked</h4>
{getUserPoolStats.isLoading ? (
<Skeleton className="h-4 w-12" />
) : (
<p>{userStatsData?.userLPToken} LP</p>
)}
</div>
</div>
</>
) : (
<p className="text-sm">
Please connect your wallet to see your position on this pool
</p>
)}
</CardContent>
</Card>
</div>
Expand Down
Loading