-
+
+
{avatar}
(null)
- const [error, setError] = useState(null)
+ const [_result, setResult] = useState(null)
+ const [_error, setError] = useState(null)
const [isScanning, setIsScanning] = useState(true)
const [showDialog, setShowDialog] = useState(false)
const [scannedAddress, setScannedAddress] = useState(null)
@@ -46,10 +45,6 @@ export default function PayoutScanPage() {
// Fetch user details using the hook
const { data: userDetails } = useUserDetails(scannedAddress as Address)
- const { showToast } = usePoolCreationStore(state => ({
- showToast: state.showToast,
- }))
-
const resetQrDialog = () => {
setShowDialog(false)
setCheckInState(CheckInState.PROCESSING_CHECK_IN)
@@ -60,7 +55,7 @@ export default function PayoutScanPage() {
try {
isProcessing.current = true
- const parsedQrData: QrCodeCheckInData = JSON.parse(decodedResult)
+ const parsedQrData: QrCodeCheckInData = JSON.parse(decodedResult) as QrCodeCheckInData
if (parsedQrData.poolId !== params?.['pool-id']) {
setCheckInStatus({ success: false, message: 'This QR code is for a different pool' })
setCheckInState(CheckInState.ERROR)
@@ -77,7 +72,7 @@ export default function PayoutScanPage() {
// Check participant status first
const statusResponse = await checkParticipantStatusAction(
- params['pool-id'] as string,
+ params['pool-id'],
parsedQrData.address as Address,
)
@@ -159,7 +154,7 @@ export default function PayoutScanPage() {
}
}
- const handlePayout = async () => {
+ const handlePayout = () => {
if (!qrData || !params?.['pool-id']) return
setCheckInState(CheckInState.PROCESSING_PAYOUT)
@@ -177,7 +172,7 @@ export default function PayoutScanPage() {
-
+
}
title='Check in failed'
@@ -186,7 +181,7 @@ export default function PayoutScanPage() {
italicSubtitle={false}
footer={
{isAdmin && (
-
+
)}
diff --git a/src/app/(pages)/pool/[pool-id]/participants/_components/use-set-winners.ts b/src/app/(pages)/pool/[pool-id]/participants/_components/use-set-winners.ts
index a9c1d68f..f086481d 100644
--- a/src/app/(pages)/pool/[pool-id]/participants/_components/use-set-winners.ts
+++ b/src/app/(pages)/pool/[pool-id]/participants/_components/use-set-winners.ts
@@ -1,13 +1,14 @@
-import { useState, useCallback, useEffect } from 'react'
+import useTransactions from '@/hooks/use-transactions'
+import { getConfig } from '@/providers/configs/wagmi.config'
+import { currentPoolAddress } from '@/server/blockchain/server-config'
+import { usePayoutStore } from '@/stores/payout-store'
+import { poolAbi } from '@/types/contracts'
import { useQueryClient } from '@tanstack/react-query'
-import { getAbiItem, Hash } from 'viem'
-import { useWaitForTransactionReceipt } from 'wagmi'
+import { useCallback, useEffect, useState } from 'react'
import { toast } from 'sonner'
-import { poolAbi } from '@/types/contracts'
-import { currentPoolAddress } from '@/app/_server/blockchain/server-config'
-import useTransactions from '@/app/_client/hooks/use-transactions'
-import { usePayoutStore } from '@/app/_client/stores/payout-store'
-import { getConfig } from '@/app/_client/providers/configs/wagmi.config'
+import type { Hash } from 'viem'
+import { getAbiItem } from 'viem'
+import { useWaitForTransactionReceipt } from 'wagmi'
export function useSetWinners(poolId: string) {
const { executeTransactions, result } = useTransactions()
@@ -59,8 +60,8 @@ export function useSetWinners(poolId: string) {
if (isConfirmed && result.hash && result.hash !== lastConfirmedHash) {
toast.success('Successfully set payouts')
clearPoolPayouts(poolId)
- queryClient.invalidateQueries({ queryKey: ['participants', poolId] })
- queryClient.invalidateQueries({ queryKey: ['poolDetails', poolId, getConfig().state.chainId] })
+ void queryClient.invalidateQueries({ queryKey: ['participants', poolId] })
+ void queryClient.invalidateQueries({ queryKey: ['poolDetails', poolId, getConfig().state.chainId] })
setLastConfirmedHash(result.hash)
}
diff --git a/src/app/(pages)/pool/[pool-id]/participants/_components/use-user-details.ts b/src/app/(pages)/pool/[pool-id]/participants/_components/use-user-details.ts
index 3330fdd0..df72bcbb 100644
--- a/src/app/(pages)/pool/[pool-id]/participants/_components/use-user-details.ts
+++ b/src/app/(pages)/pool/[pool-id]/participants/_components/use-user-details.ts
@@ -1,7 +1,7 @@
import { useQuery } from '@tanstack/react-query'
import { getSupabaseBrowserClient } from './db-client'
import type { Tables } from '@/types/db'
-import { Address } from 'viem'
+import type { Address } from 'viem'
type UserDetails = Pick
, 'avatar' | 'displayName' | 'walletAddress'>
diff --git a/src/app/(pages)/pool/[pool-id]/ticket/_components/fetch-pool-details.ts b/src/app/(pages)/pool/[pool-id]/ticket/_components/fetch-pool-details.ts
index 568ff194..120ac036 100644
--- a/src/app/(pages)/pool/[pool-id]/ticket/_components/fetch-pool-details.ts
+++ b/src/app/(pages)/pool/[pool-id]/ticket/_components/fetch-pool-details.ts
@@ -1,5 +1,5 @@
-import { getConfig } from '@/app/_client/providers/configs/wagmi.config'
-import { currentPoolAddress } from '@/app/_server/blockchain/server-config'
+import { getConfig } from '@/providers/configs/wagmi.config'
+import { currentPoolAddress } from '@/server/blockchain/server-config'
import { poolAbi } from '@/types/contracts'
import { getPublicClient } from '@wagmi/core'
diff --git a/src/app/(pages)/pool/[pool-id]/ticket/_components/use-pool-details.ts b/src/app/(pages)/pool/[pool-id]/ticket/_components/use-pool-details.ts
index b90e0185..215477ad 100644
--- a/src/app/(pages)/pool/[pool-id]/ticket/_components/use-pool-details.ts
+++ b/src/app/(pages)/pool/[pool-id]/ticket/_components/use-pool-details.ts
@@ -1,6 +1,6 @@
+import { getConfig } from '@/providers/configs/wagmi.config'
import { useQuery } from '@tanstack/react-query'
import { fetchPoolDetails } from './fetch-pool-details'
-import { getConfig } from '@/app/_client/providers/configs/wagmi.config'
export const usePoolDetails = (poolId: string) => {
const {
diff --git a/src/app/(pages)/pool/[pool-id]/ticket/page.tsx b/src/app/(pages)/pool/[pool-id]/ticket/page.tsx
index 5fb31b52..e852d371 100644
--- a/src/app/(pages)/pool/[pool-id]/ticket/page.tsx
+++ b/src/app/(pages)/pool/[pool-id]/ticket/page.tsx
@@ -23,7 +23,7 @@ const TicketPage = ({ params: { 'pool-id': poolId } }: { params: { 'pool-id': st
{hasJoined ? (
// eslint-disable-next-line tailwindcss/no-custom-classname
-
)
) : (
You have not joined the pool
)}
- )
+ );
}
export default TicketPage
diff --git a/src/app/(pages)/pool/new/_components/retry-dialog.tsx b/src/app/(pages)/pool/new/_components/retry-dialog.tsx
index 7dab7887..12d5b281 100644
--- a/src/app/(pages)/pool/new/_components/retry-dialog.tsx
+++ b/src/app/(pages)/pool/new/_components/retry-dialog.tsx
@@ -1,4 +1,5 @@
-import { Dialog } from '@/app/_components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Dialog } from '@/components/ui/dialog'
import {
Drawer,
DrawerClose,
@@ -7,8 +8,7 @@ import {
DrawerFooter,
DrawerHeader,
DrawerTitle,
-} from '@/app/_components/ui/drawer'
-import { Button } from '@/app/_components/ui/button'
+} from '@/components/ui/drawer'
interface RetryDialogProps {
open: boolean
@@ -30,7 +30,7 @@ const RetryDialog = ({ open, onOpenChange, onRetry, onCancel, isDesktop }: Retry
-
-
diff --git a/src/app/(pages)/pool/new/create-pool-form.tsx b/src/app/(pages)/pool/new/create-pool-form.tsx
index bf2908c2..ded48cf7 100644
--- a/src/app/(pages)/pool/new/create-pool-form.tsx
+++ b/src/app/(pages)/pool/new/create-pool-form.tsx
@@ -1,36 +1,50 @@
'use client'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { useAppStore } from '@/providers/app-store.provider'
+import { Steps, usePoolCreationStore } from '@/stores/pool-creation-store'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Loader2 } from 'lucide-react'
import { useCallback, useEffect, useRef, useState } from 'react'
-import { useCreatePool } from './use-create-pool'
-import { FormFieldKey, formFields } from './form-fields'
-import { Button } from '@/app/_components/ui/button'
-import { Label } from '@/app/_components/ui/label'
-import { Steps, usePoolCreationStore } from '@/app/_client/stores/pool-creation-store'
-import { useAppStore } from '@/app/_client/providers/app-store.provider'
import { useFormStatus } from 'react-dom'
-import { Loader2 } from 'lucide-react'
+import type { Resolver } from 'react-hook-form'
+import { FormProvider, useForm } from 'react-hook-form'
+import type { z } from 'zod'
import RetryDialog from './_components/retry-dialog'
+import { CreatePoolFormSchema, REQUIRED_FIELDS } from './_lib/definitions'
+import { formFields } from './form-fields'
+import { useCreatePool } from './use-create-pool'
export default function CreatePoolForm() {
const {
formAction,
state,
- createPoolOnChain,
isPending,
isConfirming,
showRetryDialog,
handleRetry,
handleRetryDialogClose,
isDesktop,
- poolUpdated,
- hasAttemptedChainCreation,
+ formData,
+ formErrors,
+ handleFieldChange,
+ validateForm,
} = useCreatePool()
- const { setBottomBarContent, setTransactionInProgress, isRouting } = useAppStore(s => ({
+
+ type FormSchema = z.infer
+
+ const methods = useForm>({
+ resolver: zodResolver(CreatePoolFormSchema) as unknown as Resolver>,
+ mode: 'onChange',
+ criteriaMode: 'all',
+ defaultValues: formData,
+ })
+
+ const { setBottomBarContent, setTransactionInProgress } = useAppStore(s => ({
setBottomBarContent: s.setBottomBarContent,
setTransactionInProgress: s.setTransactionInProgress,
- isRouting: s.isRouting,
}))
- const hasCreatedPool = useRef(false)
const { setStep, showToast } = usePoolCreationStore(state => ({
setStep: state.setStep,
@@ -40,140 +54,176 @@ export default function CreatePoolForm() {
const { pending } = useFormStatus()
const [isSubmitting, setIsSubmitting] = useState(false)
- const [formErrors, setFormErrors] = useState>(state.errors || {})
- const hasErrors = Object.values(formErrors).some(errorArray => errorArray.length > 0)
+ const errorCount = Object.values(formErrors).reduce((total, arr) => total + (arr?.length ?? 0), 0)
+ const hasErrors = errorCount > 0
+
+ // Refs to each field section for smooth scrolling
+ const fieldRefs = useRef>({})
+
const isProcessing = isSubmitting || pending || isPending || isConfirming
const isButtonDisabled = hasErrors || isProcessing
- console.log('Form state:', { hasErrors, isProcessing, isButtonDisabled, pending, isPending, isConfirming })
+ // Stable handler for dateRange changes to avoid re-creating on each render
+ const handleDateRangeChange = useCallback(
+ (value: { start: Date; end: Date }) => handleFieldChange('dateRange', value as never),
+ [handleFieldChange],
+ )
const handleSubmit = useCallback(
- (event: React.FormEvent) => {
- console.log('handleSubmit called')
- if (isButtonDisabled) {
- console.log('Button is disabled, preventing submission')
- event.preventDefault()
+ (e: React.FormEvent) => {
+ e.preventDefault()
+ console.log('Form submitted')
+
+ if (!validateForm()) {
+ console.log('Form validation failed, scrolling to first error')
+ // Find the first field with an error and scroll to it
+ const firstErrorField = Object.keys(formErrors).find(
+ key => (formErrors as Record)[key]?.length > 0,
+ )
+ if (firstErrorField && fieldRefs.current[firstErrorField]) {
+ fieldRefs.current[firstErrorField]?.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ })
+ }
return
}
- console.log('Proceeding with form submission')
+
setIsSubmitting(true)
- setStep(Steps.CreatingDB)
- showToast({
- type: 'info',
- message: 'Creating pool in DB...',
- })
+ const formDataObj = new FormData(e.currentTarget)
+ formAction(formDataObj)
},
- [isButtonDisabled, setStep, showToast],
+ [validateForm, formErrors, formAction],
)
useEffect(() => {
- console.log('Effect: Updating isSubmitting state', { pending, isPending, isConfirming })
- if (!pending && !isPending && !isConfirming) {
+ console.log('Form state changed:', state)
+ if (state?.message === 'Pool created successfully') {
+ console.log('Pool created successfully')
+ setStep(Steps.CreatingChain)
setIsSubmitting(false)
+ } else if (state?.message && state.message !== 'Pool created successfully') {
+ console.log('Form submission failed:', state.message)
+ setIsSubmitting(false)
+ showToast({ type: 'error', message: state.message })
}
- }, [pending, isPending, isConfirming])
+ }, [state, setStep, showToast])
useEffect(() => {
- console.log('Effect: Setting up bottom bar content')
- if (!isRouting) {
- setBottomBarContent(
- ,
- )
+ if (isProcessing) {
+ setTransactionInProgress(true)
+ } else {
+ setTransactionInProgress(false)
}
- setTransactionInProgress(isPending || isConfirming)
-
- return () => {
- setBottomBarContent(null)
- }
- }, [
- setBottomBarContent,
- setTransactionInProgress,
- isPending,
- isConfirming,
- isButtonDisabled,
- isProcessing,
- hasErrors,
- isRouting,
- ])
+ }, [isProcessing, setTransactionInProgress])
useEffect(() => {
- console.log('Effect: Checking pool creation status', {
- message: state.message,
- internalPoolId: state.internalPoolId,
- poolUpdated,
- hasAttemptedChainCreation,
- })
- if (
- state.message === 'Pool created successfully' &&
- state.internalPoolId &&
- !hasCreatedPool.current &&
- !poolUpdated &&
- !hasAttemptedChainCreation
- ) {
- console.log('Pool created successfully, calling createPoolOnChain')
- hasCreatedPool.current = true
- createPoolOnChain()
- }
- if (state.message?.includes('Error')) {
- console.log('Pool creation failed:', state.message)
- setIsSubmitting(false)
- hasCreatedPool.current = false // Reset this here
- }
- }, [state.message, state.internalPoolId, createPoolOnChain, poolUpdated, hasAttemptedChainCreation])
+ if (isDesktop) return
+
+ setBottomBarContent(
+ ,
+ )
+
+ return () => setBottomBarContent(null)
+ }, [isDesktop, setBottomBarContent, isButtonDisabled, isProcessing, isSubmitting])
return (
- <>
+
+
{
- if (!open) handleRetryDialogClose()
+ if (!open) void handleRetryDialogClose()
}}
onRetry={handleRetry}
onCancel={handleRetryDialogClose}
isDesktop={isDesktop}
/>
-
+
)
}
diff --git a/src/app/(pages)/pool/new/form-fields.tsx b/src/app/(pages)/pool/new/form-fields.tsx
index c0532553..0cab5776 100644
--- a/src/app/(pages)/pool/new/form-fields.tsx
+++ b/src/app/(pages)/pool/new/form-fields.tsx
@@ -1,19 +1,19 @@
import dynamic from 'next/dynamic'
// Dynamic imports for form components
-const CurrencyAmount = dynamic(() => import('@/app/_components/forms-controls/currency-amount.control'), {
+const CurrencyAmount = dynamic(() => import('@/components/forms-controls/currency-amount.control'), {
ssr: false,
})
-const DateTimeRange = dynamic(() => import('@/app/_components/forms-controls/date-time-range.control'), {
+const DateTimeRange = dynamic(() => import('@/components/forms-controls/date-time-range.control'), {
ssr: false,
})
-const ImageUploader = dynamic(() => import('@/app/_components/forms-controls/image-uploader.control'), {
+const ImageUploader = dynamic(() => import('@/components/forms-controls/image-uploader.control'), {
ssr: false,
})
-const NumberControl = dynamic(() => import('@/app/_components/forms-controls/number.control'), { ssr: false })
-const TextArea = dynamic(() => import('@/app/_components/forms-controls/text-area.control'), { ssr: false })
-const Text = dynamic(() => import('@/app/_components/forms-controls/text.control'), { ssr: false })
-const Switch = dynamic(() => import('@/app/_components/forms-controls/switch.control'), { ssr: false })
+const NumberControl = dynamic(() => import('@/components/forms-controls/number.control'), { ssr: false })
+const TextArea = dynamic(() => import('@/components/forms-controls/text-area.control'), { ssr: false })
+const Text = dynamic(() => import('@/components/forms-controls/text.control'), { ssr: false })
+const Switch = dynamic(() => import('@/components/forms-controls/switch.control'), { ssr: false })
export const formFields = [
{
@@ -62,7 +62,7 @@ export const formFields = [
key: 'termsURL',
name: 'termsURL',
label: 'Link to T&C, rules, or Code of Conduct',
- description: 'Paste a link to the pool terms document',
+ description: 'Paste a link to the pool terms document (optional)',
component: Text,
},
{
diff --git a/src/app/(pages)/pool/new/page.tsx b/src/app/(pages)/pool/new/page.tsx
index 914e337b..ffdc62e6 100644
--- a/src/app/(pages)/pool/new/page.tsx
+++ b/src/app/(pages)/pool/new/page.tsx
@@ -1,7 +1,6 @@
+import PageWrapper from '@/components/page-wrapper'
import { getUserAdminStatusActionWithCookie } from '@/features/users/actions'
import CreatePoolForm from './create-pool-form'
-import PageWrapper from '@/components/page-wrapper'
-import UserMenu from '@/components/user-menu'
export default async function CreatePoolPage() {
const isAdmin = await getUserAdminStatusActionWithCookie()
diff --git a/src/app/(pages)/pool/new/use-create-pool.ts b/src/app/(pages)/pool/new/use-create-pool.ts
index d50fbe16..bfb121ed 100644
--- a/src/app/(pages)/pool/new/use-create-pool.ts
+++ b/src/app/(pages)/pool/new/use-create-pool.ts
@@ -1,16 +1,18 @@
+import useMediaQuery from '@/hooks/use-media-query'
+import useTransactions from '@/hooks/use-transactions'
+import { currentPoolAddress, currentTokenAddress } from '@/server/blockchain/server-config'
+import { Steps, usePoolCreationStore } from '@/stores/pool-creation-store'
+import { poolAbi } from '@/types/contracts'
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useFormState } from 'react-dom'
-import { useRouter } from 'next/navigation'
import type { Hash } from 'viem'
-import { parseEventLogs, ContractFunctionExecutionError, parseUnits } from 'viem'
-import { createPoolAction, deletePool, updatePoolStatus } from './actions'
-import { Steps, usePoolCreationStore } from '@/app/_client/stores/pool-creation-store'
+import { ContractFunctionExecutionError, parseEventLogs, parseUnits } from 'viem'
import { useWaitForTransactionReceipt } from 'wagmi'
-import { useQueryClient } from '@tanstack/react-query'
-import { currentPoolAddress, currentTokenAddress } from '@/app/_server/blockchain/server-config'
-import useTransactions from '@/app/_client/hooks/use-transactions'
-import { poolAbi } from '@/types/contracts'
-import useMediaQuery from '@/app/_client/hooks/use-media-query'
+import { z } from 'zod'
+import { CreatePoolFormSchema, PoolObjectSchema } from './_lib/definitions'
+import { createPoolAction, deletePool, updatePoolStatus } from './actions'
const initialState = {
message: '',
@@ -28,6 +30,9 @@ const initialState = {
poolData: undefined,
}
+type FormValues = z.infer
+type FormErrors = Partial>
+
export function useCreatePool() {
const [state, formAction] = useFormState(createPoolAction, initialState)
const router = useRouter()
@@ -54,7 +59,83 @@ export function useCreatePool() {
const [transactionProcessed, setTransactionProcessed] = useState(false)
const [hasAttemptedChainCreation, setHasAttemptedChainCreation] = useState(false)
const [poolUpdated, setPoolUpdated] = useState(false)
- const createPoolOnChainRef = useRef<(() => void) | null>(null)
+ const [formData, setFormData] = useState>({})
+ const [formErrors, setFormErrors] = useState({})
+
+ const validateField = useCallback((name: K, value: FormValues[K]) => {
+ const fieldSchema = z.object({ [name]: PoolObjectSchema.shape[name] })
+ const result = fieldSchema.safeParse({ [name]: value })
+
+ if (!result.success) {
+ const fieldErrors = result.error.flatten().fieldErrors as Partial>
+
+ setFormErrors(prev => ({
+ ...prev,
+ [name]: fieldErrors[name],
+ }))
+ } else {
+ setFormErrors(prev => {
+ const { [name]: _, ...rest } = prev
+ return rest
+ })
+ }
+ }, [])
+
+ const handleFieldChange = useCallback(
+ (name: K, value: FormValues[K] | null) => {
+ if (value === null) return
+ setFormData(prev => ({ ...prev, [name]: value }))
+ validateField(name, value)
+ },
+ [validateField],
+ )
+
+ const validateForm = useCallback(() => {
+ const result = CreatePoolFormSchema.safeParse(formData)
+ if (!result.success) {
+ const flat = result.error.flatten().fieldErrors as Record
+ const aggregated: FormErrors = {}
+
+ Object.entries(flat).forEach(([k, v]) => {
+ if (k.startsWith('dateRange')) {
+ // Provide more specific error messages for dateRange
+ const enhancedMessages = v.map(msg => {
+ if (msg.includes('Start date')) {
+ return msg // Keep specific start date messages
+ } else if (msg.includes('End date') || msg.includes('End time')) {
+ return msg // Keep specific end date messages
+ } else if (msg.includes('required')) {
+ return 'Please select both start and end dates for your event'
+ } else {
+ return msg
+ }
+ })
+ aggregated.dateRange = [...(aggregated.dateRange ?? []), ...enhancedMessages]
+ } else if (k === 'description') {
+ // Provide more specific error messages for description
+ const enhancedMessages = v.map(msg => {
+ if (msg.includes('required')) {
+ return 'Please provide a description for your pool'
+ } else if (msg.includes('5 characters')) {
+ return 'Description must be at least 5 characters long'
+ } else if (msg.includes('500 characters')) {
+ return 'Description cannot exceed 500 characters'
+ } else {
+ return msg
+ }
+ })
+ aggregated.description = enhancedMessages
+ } else {
+ // Keep other field errors as they are
+ ;(aggregated as Record)[k as keyof FormValues] = v
+ }
+ })
+ setFormErrors(aggregated)
+ return false
+ }
+ setFormErrors({})
+ return true
+ }, [formData])
const createPoolOnChain = useCallback(() => {
if (!state.internalPoolId || !state.poolData || hasAttemptedChainCreation) {
@@ -103,11 +184,8 @@ export function useCreatePool() {
})
.finally(() => {
isCreatingPool.current = false
- setHasAttemptedChainCreation(false) // Reset this here
})
- }, [state.internalPoolId, state.poolData, executeTransactions, setStep, setError, hasAttemptedChainCreation])
-
- createPoolOnChainRef.current = createPoolOnChain
+ }, [state.internalPoolId, state.poolData, hasAttemptedChainCreation, setStep, executeTransactions, setError])
const handleCancellation = useCallback(async () => {
if (!state.internalPoolId) return
@@ -131,8 +209,8 @@ export function useCreatePool() {
const handleRetry = useCallback(() => {
setShowRetryDialog(false)
setIsWaitingForRetry(false)
- createPoolOnChain()
- }, [createPoolOnChain])
+ setHasAttemptedChainCreation(false)
+ }, [])
const handleRetryDialogClose = useCallback(async () => {
setShowRetryDialog(false)
@@ -161,7 +239,7 @@ export function useCreatePool() {
) {
createPoolOnChain()
}
- }, [state.internalPoolId, state.poolData, createPoolOnChain, isWaitingForRetry, hasAttemptedChainCreation])
+ }, [state.internalPoolId, state.poolData, isWaitingForRetry, hasAttemptedChainCreation, createPoolOnChain])
useEffect(() => {
if (!isConfirmed || !receipt || poolUpdated || transactionProcessed) return
@@ -201,7 +279,7 @@ export function useCreatePool() {
.finally(() => {
setPoolUpdated(false)
setTransactionProcessed(false)
- setHasAttemptedChainCreation(false) // Reset this here as well
+ setHasAttemptedChainCreation(false)
})
} else {
setError('Failed to find pool creation event')
@@ -211,7 +289,7 @@ export function useCreatePool() {
})
setTransactionProcessed(false)
setPoolUpdated(false)
- setHasAttemptedChainCreation(false) // Reset this here too
+ setHasAttemptedChainCreation(false)
}
}, [
isConfirmed,
@@ -260,7 +338,11 @@ export function useCreatePool() {
return {
formAction,
state,
- createPoolOnChain: () => createPoolOnChainRef.current?.(),
+ formData,
+ formErrors,
+ handleFieldChange,
+ validateForm,
+ createPoolOnChain: createPoolOnChain,
isPending: txResult.isLoading,
isConfirming,
callsStatus: txResult.callsStatus,
diff --git a/src/app/(pages)/pools/_components/action-bar.tsx b/src/app/(pages)/pools/_components/action-bar.tsx
index 069cde62..1901e5ba 100644
--- a/src/app/(pages)/pools/_components/action-bar.tsx
+++ b/src/app/(pages)/pools/_components/action-bar.tsx
@@ -1,8 +1,9 @@
'use client'
-import { useAuth } from '@/app/_client/hooks/use-auth'
-import { useOnRamp } from '@/app/_client/hooks/use-onramp'
-import { Button } from '@/app/_components/ui/button'
+import { SwitchChainDrawer } from '@/components/switch-chain-drawer'
+import { Button } from '@/components/ui/button'
+import { useAuth } from '@/hooks/use-auth'
+import { useOnRamp } from '@/hooks/use-onramp'
import bridgeIcon from '@/public/app/icons/svg/bridge-icon.svg'
import qrIcon from '@/public/app/icons/svg/qr-icon.svg'
import walletIcon from '@/public/app/icons/svg/wallet-icon.svg'
@@ -10,11 +11,20 @@ import withdrawIcon from '@/public/app/icons/svg/withdraw.svg'
import type { StaticImport } from 'next/dist/shared/lib/get-img-props'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
export default function ActionBar() {
const router = useRouter()
const { login, authenticated } = useAuth()
- const { handleOnRamp } = useOnRamp()
+ const { handleOnRamp, error, clearError, requiredChain } = useOnRamp()
+ const [showChainSwitchDrawer, setShowChainSwitchDrawer] = useState(false)
+
+ // Show chain switch drawer when there's a chain error
+ useEffect(() => {
+ if (error?.type === 'CHAIN_NOT_SUPPORTED') {
+ setShowChainSwitchDrawer(true)
+ }
+ }, [error])
const handleWithdraw = () => {
if (!authenticated) {
@@ -29,7 +39,13 @@ export default function ActionBar() {
login()
return
}
- void handleOnRamp()
+
+ void (async () => {
+ const success = await handleOnRamp()
+ if (!success && error?.type === 'CHAIN_NOT_SUPPORTED') {
+ setShowChainSwitchDrawer(true)
+ }
+ })()
}
const handlePayRequest = () => {
@@ -48,48 +64,74 @@ export default function ActionBar() {
router.push('/profile/cross-swap')
}
+ const handleChainSwitched = () => {
+ setShowChainSwitchDrawer(false)
+ clearError()
+ // Retry the onramp after successful chain switch
+ void handleOnRamp()
+ }
+
+ const handleChainSwitchDrawerClose = (open: boolean) => {
+ setShowChainSwitchDrawer(open)
+ if (!open) {
+ clearError()
+ }
+ }
+
return (
-
- {/* Pay/Request */}
-
-
- {/* Divider */}
-
-
- {/* Deposit */}
-
-
- {/* Divider */}
-
-
- {/* Bridge */}
-
-
- {/* Divider */}
-
-
- {/* Withdraw */}
-
-
+ {/* Pay/Request */}
+
+
+ {/* Divider */}
+
+
+ {/* Deposit */}
+
+
+ {/* Divider */}
+
+
+ {/* Bridge */}
+
+
+ {/* Divider */}
+
+
+ {/* Withdraw */}
+
+
-
-
Your Pools
- {ready && authenticated && pools && pools.length > 0 && (
-
-
- View All
-
-
-
-
-
- )}
-
-
- {!ready || !authenticated ? (
-
-
-
Welcome to Pool
-
Ready to dive into your pool journey?
-
-
- ) : (
-
- {hasNextPool ? (
- pools?.map(pool => (
-
-
-
-
-
-
-
{pool.name}
-
- {`${pool.numParticipants}/${pool.softCap} Registered`}
-
-
- Starts {new Date(pool.startDate).toLocaleDateString()}
-
-
-
-
- ))
- ) : (
-
-
-
Welcome to Pool
-
You're ready to dive in!
-
Register to an upcoming pool below.
-
- )}
-
- )}
-
-
Total balance
-
- {isLoading &&
}
- {!isLoading && (
-
-
-
+
+ {/* Show loading skeleton if balances are not ready */}
+ {isAnyLoading ? (
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
)}
-
-
-
-
-
- .
-
-
- {(dropBalance || zeroBalance).symbol}
-
-
)
}
diff --git a/src/app/(pages)/pools/_components/render-bottom-bar.test.tsx b/src/app/(pages)/pools/_components/render-bottom-bar.test.tsx
index db78dde9..cceebbe9 100644
--- a/src/app/(pages)/pools/_components/render-bottom-bar.test.tsx
+++ b/src/app/(pages)/pools/_components/render-bottom-bar.test.tsx
@@ -1,14 +1,14 @@
+import MainWrapper from '@/components/main-wrapper'
+import { Providers } from '@/providers'
+import '@testing-library/jest-dom'
import { render } from '@testing-library/react'
import RenderBottomBar from './render-bottom-bar'
-import { Providers } from '@/app/_client/providers'
-import '@testing-library/jest-dom'
-import MainWrapper from '@/app/_components/main-wrapper'
import BottomBar from '@/app/@bottombar/default'
// TODO: Fix this test, now we get the admin status from the server, so we need to mock the server
describe('RenderBottomBar', () => {
- it.todo('should render the "Create Pool" button when user is admin', async () => {
+ it.todo('should render the "Create Pool" button when user is admin', () => {
const container = render(
diff --git a/src/app/(pages)/pools/_components/render-bottom-bar.tsx b/src/app/(pages)/pools/_components/render-bottom-bar.tsx
index f74c43e6..fa8d89bc 100644
--- a/src/app/(pages)/pools/_components/render-bottom-bar.tsx
+++ b/src/app/(pages)/pools/_components/render-bottom-bar.tsx
@@ -1,37 +1,40 @@
'use client'
-import { useAppStore } from '@/app/_client/providers/app-store.provider'
-import { Button } from '@/app/_components/ui/button'
-import Link from 'next/link'
-import { useEffect } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { getUserAdminStatusActionWithCookie } from '@/features/users/actions'
+import { Button } from '@/components/ui/button'
+import { useIsAdmin } from '@/hooks/use-is-admin'
+import { useSafeNavigation } from '@/hooks/use-safe-navigation'
+import { useAppStore } from '@/providers/app-store.provider'
import { usePrivy } from '@privy-io/react-auth'
+import { useCallback, useEffect } from 'react'
export default function RenderBottomBar() {
const { authenticated } = usePrivy()
const setBottomBar = useAppStore(state => state.setBottomBarContent)
- const isRouting = useAppStore(state => state.isRouting)
- const { data: isAdmin, isLoading } = useQuery({
- queryKey: ['userAdminStatus'],
- queryFn: () => getUserAdminStatusActionWithCookie(),
- })
+ const { navigate, isRouting } = useSafeNavigation()
+ const { isAdmin, isLoading } = useIsAdmin()
+
+ const handleCreatePool = useCallback(() => {
+ const success = navigate('/pool/new')
+ if (!success && process.env.NODE_ENV === 'development') {
+ console.warn('[RenderBottomBar] Navigation to /pool/new was blocked')
+ }
+ }, [navigate])
useEffect(() => {
if (isAdmin && !isRouting && authenticated) {
setBottomBar(
,
)
}
return () => {
setBottomBar(null)
}
- }, [isAdmin, setBottomBar, isRouting, authenticated])
+ }, [isAdmin, setBottomBar, isRouting, authenticated, handleCreatePool])
if (isLoading) return null
diff --git a/src/app/(pages)/pools/_components/upcoming-pools.tsx b/src/app/(pages)/pools/_components/upcoming-pools.tsx
deleted file mode 100644
index f823a5f9..00000000
--- a/src/app/(pages)/pools/_components/upcoming-pools.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import PoolList from './pool-list'
-import PoolsSkeleton from './pools-skeleton'
-import { useUpcomingPools } from '@/hooks/use-upcoming-pools'
-
-export default function UpcomingPools() {
- const { data: pools, isLoading, isError } = useUpcomingPools()
-
- if (isError) {
- return Error loading upcoming pools
- }
-
- return (
-
- )
-}
diff --git a/src/app/(pages)/pools/actions.ts b/src/app/(pages)/pools/actions.ts
index 2d46bfaa..46a68ad1 100644
--- a/src/app/(pages)/pools/actions.ts
+++ b/src/app/(pages)/pools/actions.ts
@@ -1,65 +1,34 @@
'use server'
-import { authenticatedProcedure } from '../../_server/procedures/authenticated'
-import { getAllPoolsUseCase } from '../../_server/use-cases/pools/get-all-pools'
-import { getUserNextPoolUseCase } from '../../_server/use-cases/pools/get-user-next-pool'
-import { unauthenticatedProcedure } from '../../_server/procedures/unauthenticated'
-import { getAddressBalanceUseCase } from '../../_server/use-cases/users/get-user-balance'
-import { isAdminUseCase } from '../../_server/use-cases/users/is-admin'
+import { verifyToken } from '@/server/auth/privy'
+import { getAddressBalanceUseCase } from '@/server/use-cases/users/get-user-balance'
+import { revalidateTag } from 'next/cache'
import type { Address } from 'viem'
-import type { PoolItem } from '../../_lib/entities/models/pool-item'
-import { verifyToken } from '../../_server/auth/privy'
-
-export const getUpcomingPoolsAction = async () => {
- // unauthenticatedProcedure.createServerAction().handler(async (): Promise => {
- return getAllPoolsUseCase()
-}
-
-// export const getUserNextPoolAction = async () => {
-// // authenticatedProcedure.createServerAction().handler(async ({ ctx: { user } }): Promise => {
-// const user = await verifyToken()
-
-// const address = user?.wallet?.address as Address
-
-// return getUserNextPoolUseCase(address)
-// }
+/**
+ * Get token balance for authenticated user
+ */
export const getTokenBalanceAction = async () => {
- // authenticatedProcedure.createServerAction().handler(async ({ ctx: { user } }) => {
const user = await verifyToken()
+ if (!user?.wallet?.address) {
+ return undefined
+ }
- const address = user?.wallet?.address as Address
+ const address = user.wallet.address as Address
return getAddressBalanceUseCase(address)
}
-// export const getAdminStatusAction = async () => {
-// // authenticatedProcedure.createServerAction().handler(async ({ ctx: { user } }) => {
-// const user = await verifyToken()
-
-// console.log('[getAdminStatusAction] user', user?.id)
-
-// const address = user?.wallet?.address as Address
-
-// console.log('[getAdminStatusAction] address', address)
-
-// return isAdminUseCase(address)
-// }
-
+/**
+ * Get user wallet address
+ */
export const getUserAddressAction = async () => {
- // authenticatedProcedure.createServerAction().handler(async ({ ctx: { user } }) => {
const user = await verifyToken()
-
return user?.wallet?.address as Address
}
-// export async function getPoolsPageAction() {
-// const [[nextPool], [upcomingPools], [balance], [isAdmin], [userAddress]] = await Promise.all([
-// getUserNextPoolAction(),
-// getUpcomingPoolsAction(),
-// getTokenBalanceAction(),
-// getAdminStatusAction(),
-// getUserAddressAction(),
-// ])
-
-// return { nextPool, balance, pools: upcomingPools, isAdmin, userAddress }
-// }
+/**
+ * Revalidate pools data cache
+ */
+export const revalidatePoolsAction = async () => {
+ await Promise.all([revalidateTag('pools'), revalidateTag('upcoming-pools')])
+}
diff --git a/src/app/(pages)/pools/loading.tsx b/src/app/(pages)/pools/loading.tsx
new file mode 100644
index 00000000..acb8bca3
--- /dev/null
+++ b/src/app/(pages)/pools/loading.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import LoadingAnimation from '../pool/[pool-id]/admin/_components/loading-animation'
+
+export default function PoolsLoading() {
+ return (
+
+
+
Loading pools...
+
+ {/* Ripple effect */}
+
+
-
+ {/*
*/}
-
+
-
-
-
+
+ {/* User Pools Section with Suspense boundary */}
+ }>
+ {/* */}
+
+
+ {/* Upcoming Pools Section with Suspense boundary */}
+ }>
+ {/* */}
+
-
-
+ {/*
*/}
+ {/*
*/}
)
}
+
+/**
+ * Dynamic page generation with ISR (Incremental Static Regeneration)
+ * Regenerate the page every 30 seconds for fresh pool data
+ */
+export const revalidate = 30
diff --git a/src/app/(pages)/profile/_components/balance/balance-page.tsx b/src/app/(pages)/profile/_components/balance/balance-page.tsx
index 38560e37..2efce5db 100644
--- a/src/app/(pages)/profile/_components/balance/balance-page.tsx
+++ b/src/app/(pages)/profile/_components/balance/balance-page.tsx
@@ -1,19 +1,42 @@
'use client'
-import { useBalance } from 'wagmi'
+import { currentTokenAddress } from '@/server/blockchain/server-config'
import { useWallets } from '@privy-io/react-auth'
import type { Address } from 'viem'
+import { useBalance } from 'wagmi'
import Container from '../../claim-winning/_components/container'
import SectionContent from '../../claim-winning/_components/section-content'
-import { getConfig } from '@/app/_client/providers/configs/wagmi.config'
-import { currentTokenAddress } from '@/app/_server/blockchain/server-config'
export default function ProfileBalanceSection() {
const { wallets } = useWallets()
+ // Get wallet address safely
+ const walletAddress = wallets[0]?.address as Address
+
+ // Only proceed with balance query if we have valid prerequisites
+ const canFetchBalance = Boolean(walletAddress && currentTokenAddress)
+
+ // Debug log for USDC balance request - only when we actually make the request
+ if (process.env.NODE_ENV === 'development' && canFetchBalance) {
+ console.log('[DEBUG][ProfileBalancePage] useBalance USDC', {
+ address: walletAddress,
+ token: currentTokenAddress,
+ stack: new Error().stack?.split('\n').slice(1, 3).join(' | '),
+ timestamp: new Date().toISOString(),
+ })
+ }
+
const { data: tokenBalanceData } = useBalance({
- address: wallets[0]?.address as Address,
+ address: walletAddress,
token: currentTokenAddress,
+ query: {
+ staleTime: 60_000, // Consider data fresh for 1 minute
+ gcTime: 300_000, // Keep in cache for 5 minutes
+ refetchOnWindowFocus: false,
+ refetchOnMount: false,
+ refetchInterval: false, // โ
DISABLED automatic polling to prevent excessive requests
+ enabled: canFetchBalance,
+ },
})
const decimals = BigInt(tokenBalanceData?.decimals ?? BigInt(18))
diff --git a/src/app/(pages)/profile/_components/claimable/claimable.tsx b/src/app/(pages)/profile/_components/claimable/claimable.tsx
index 5babd238..94cb6dcc 100644
--- a/src/app/(pages)/profile/_components/claimable/claimable.tsx
+++ b/src/app/(pages)/profile/_components/claimable/claimable.tsx
@@ -1,17 +1,15 @@
'use client'
-import { useAccount } from 'wagmi'
-import { useClaimablePools } from '../../claim-winning/_components/use-claimable-pools'
-import PoolCardRow from '../../claim-winning/_components/pool-card-row'
-import { Button } from '@/app/_components/ui/button'
-import useTransactions from '@/app/_client/hooks/use-transactions'
-import { getConfig } from '@/app/_client/providers/configs/wagmi.config'
-import { toast } from 'sonner'
-import { getAbiItem } from 'viem'
+import { Button } from '@/components/ui/button'
import { useConfetti } from '@/hooks/use-confetti'
-import { poolAbi } from '@/types/contracts'
-import { currentPoolAddress } from '@/app/_server/blockchain/server-config'
+import useTransactions from '@/hooks/use-transactions'
import { useUserInfo } from '@/hooks/use-user-info'
+import { currentPoolAddress } from '@/server/blockchain/server-config'
+import { poolAbi } from '@/types/contracts'
+import { toast } from 'sonner'
+import { getAbiItem } from 'viem'
+import PoolCardRow from '../../claim-winning/_components/pool-card-row'
+import { useClaimablePools } from '../../claim-winning/_components/use-claimable-pools'
export default function ClaimablePrizes() {
const { data: user } = useUserInfo()
@@ -76,7 +74,7 @@ export default function ClaimablePrizes() {
))}
{/*
{poolData?.poolDBInfo?.['pool_name'] ?? ` Pool Id ${poolId}`}
*/}
-
Winner
+
Winner
{/* */}
-
+
{/* {ethers.formatEther(totalWinningAmount ?? 0).toString()} USD */}
diff --git a/src/app/(pages)/profile/claim-winning/_components/claimable-prizes.tsx b/src/app/(pages)/profile/claim-winning/_components/claimable-prizes.tsx
index 05db9171..0d035b1c 100644
--- a/src/app/(pages)/profile/claim-winning/_components/claimable-prizes.tsx
+++ b/src/app/(pages)/profile/claim-winning/_components/claimable-prizes.tsx
@@ -1,37 +1,39 @@
'use client'
-import { Button } from '@/app/_components/ui/button'
-import { useEffect } from 'react'
-import type { Address } from 'viem'
+import { Button } from '@/components/ui/button'
+import { useChainAwareContracts } from '@/hooks/use-chain-aware-contracts'
+import { useConfetti } from '@/hooks/use-confetti'
+import useTransactions from '@/hooks/use-transactions'
+import { useUserInfo } from '@/hooks/use-user-info'
+import { useAppStore } from '@/providers/app-store.provider'
+import { poolAbi } from '@/types/contracts'
+import { Loader2Icon } from 'lucide-react'
+import { useCallback, useEffect, useMemo } from 'react'
import { getAbiItem } from 'viem'
import Container from './container'
import PoolCardRow from './pool-card-row'
import SectionContent from './section-content'
import SectionTitle from './section-title'
import { useClaimablePools } from './use-claimable-pools'
-import { useAppStore } from '@/app/_client/providers/app-store.provider'
-import useTransactions from '@/app/_client/hooks/use-transactions'
-import { currentPoolAddress } from '@/app/_server/blockchain/server-config'
-import { poolAbi } from '@/types/contracts'
-import { useUserInfo } from '@/hooks/use-user-info'
-import { Loader2Icon } from 'lucide-react'
-import { useConfetti } from '@/hooks/use-confetti'
export default function ClaimablePrizesList() {
const setBottomBarContent = useAppStore(state => state.setBottomBarContent)
const isRouting = useAppStore(state => state.isRouting)
const { claimablePools, isPending } = useClaimablePools()
+ const { poolAddress } = useChainAwareContracts()
+
+ // TODO: Apparently this is generating POST requests hitting limits on the RPC endpoint.
const { executeTransactions } = useTransactions()
const { data: user } = useUserInfo()
const { startConfetti } = useConfetti()
- const poolIdsToClaimFrom = claimablePools?.[0] || []
+ const poolIdsToClaimFrom = useMemo(() => claimablePools?.[0] || [], [claimablePools])
- const onClaimFromPoolsButtonClicked = () => {
+ const onClaimFromPoolsButtonClicked = useCallback(() => {
if (!claimablePools || poolIdsToClaimFrom.length === 0) return
- const userAddress = user?.address as Address | undefined
+ const userAddress = user?.address
if (!userAddress) return
const walletAddresses = poolIdsToClaimFrom.map(() => userAddress)
@@ -41,10 +43,10 @@ export default function ClaimablePrizesList() {
name: 'claimWinnings',
})
- executeTransactions(
+ void executeTransactions(
[
{
- address: currentPoolAddress,
+ address: poolAddress,
abi: [ClaimWinningsFunction],
functionName: ClaimWinningsFunction.name,
args: [poolIdsToClaimFrom, walletAddresses],
@@ -58,7 +60,7 @@ export default function ClaimablePrizesList() {
},
},
)
- }
+ }, [claimablePools, poolIdsToClaimFrom, user?.address, executeTransactions, startConfetti, poolAddress])
useEffect(() => {
if (!claimablePools || poolIdsToClaimFrom?.length === 0) {
@@ -77,12 +79,12 @@ export default function ClaimablePrizesList() {
return () => {
setBottomBarContent(undefined)
}
- }, [claimablePools])
+ }, [claimablePools, isRouting, onClaimFromPoolsButtonClicked, poolIdsToClaimFrom?.length, setBottomBarContent])
if (isPending) {
return (
-
+
)
}
diff --git a/src/app/(pages)/profile/claim-winning/_components/fetch-claimable-pools.ts b/src/app/(pages)/profile/claim-winning/_components/fetch-claimable-pools.ts
index 7a63d4ec..d3270ee2 100644
--- a/src/app/(pages)/profile/claim-winning/_components/fetch-claimable-pools.ts
+++ b/src/app/(pages)/profile/claim-winning/_components/fetch-claimable-pools.ts
@@ -1,8 +1,8 @@
-import { getConfig } from '@/app/_client/providers/configs/wagmi.config'
-import { currentPoolAddress } from '@/app/_server/blockchain/server-config'
+import { getConfig } from '@/providers/configs/wagmi.config'
+import { currentPoolAddress } from '@/server/blockchain/server-config'
import { poolAbi } from '@/types/contracts'
import { getPublicClient } from '@wagmi/core'
-import { Address } from 'viem'
+import type { Address } from 'viem'
export const fetchClaimablePools = async ({ queryKey }: { queryKey: [string, string, number] }) => {
const [_, address] = queryKey
diff --git a/src/app/(pages)/profile/claim-winning/_components/pool-card-row-image.tsx b/src/app/(pages)/profile/claim-winning/_components/pool-card-row-image.tsx
index 6968edc1..28793eb5 100644
--- a/src/app/(pages)/profile/claim-winning/_components/pool-card-row-image.tsx
+++ b/src/app/(pages)/profile/claim-winning/_components/pool-card-row-image.tsx
@@ -1,12 +1,16 @@
'use client'
-import { Skeleton } from '@/app/_components/ui/skeleton'
+import { Skeleton } from '@/components/ui/skeleton'
import Image from 'next/image'
import { useState } from 'react'
const PoolCardRowImage = ({ image }: { image: string }) => {
const [isLoading, setLoading] = useState(true)
+ const handleLoad = () => {
+ setLoading(false)
+ }
+
return (
{isLoading && }
@@ -16,7 +20,7 @@ const PoolCardRowImage = ({ image }: { image: string }) => {
fill
fetchPriority='low'
sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
- onLoad={() => setLoading(false)}
+ onLoad={handleLoad}
/>
)
diff --git a/src/app/(pages)/profile/claim-winning/_components/pool-card-row.tsx b/src/app/(pages)/profile/claim-winning/_components/pool-card-row.tsx
index 44866013..fa2931f9 100644
--- a/src/app/(pages)/profile/claim-winning/_components/pool-card-row.tsx
+++ b/src/app/(pages)/profile/claim-winning/_components/pool-card-row.tsx
@@ -1,10 +1,10 @@
import { useWinnerDetail } from '@/app/(pages)/pool/[pool-id]/_components/use-winner-detail'
+import { getPoolDetailsById } from '@/features/pools/server/db/pools'
import { useWallets } from '@privy-io/react-auth'
-import { capitalize } from 'lodash'
-import PoolCardRowImage from './pool-card-row-image'
import { useQuery } from '@tanstack/react-query'
-import { getPoolDetailsById } from '@/features/pools/server/db/pools'
+import { capitalize } from 'lodash'
import { formatUnits } from 'viem'
+import PoolCardRowImage from './pool-card-row-image'
interface PoolCardRowProps {
poolId: string
@@ -14,15 +14,11 @@ interface PoolCardRowProps {
const PoolCardRow = ({ poolId }: PoolCardRowProps) => {
const { wallets } = useWallets()
- const {
- data: pool,
- isPending: isPoolPending,
- isError: isPoolError,
- } = useQuery({
+ const { data: pool } = useQuery({
queryKey: ['pool-details', poolId],
queryFn: getPoolDetailsById,
})
- const { winnerDetail, isLoading, error } = useWinnerDetail(poolId, wallets?.[0]?.address)
+ const { winnerDetail } = useWinnerDetail(poolId, wallets?.[0]?.address)
const formatAmount = (num: number): string => {
if (num < 0.01) {
diff --git a/src/app/(pages)/profile/claim-winning/_components/use-claimable-pools.ts b/src/app/(pages)/profile/claim-winning/_components/use-claimable-pools.ts
index 6cce95c8..dd9deadb 100644
--- a/src/app/(pages)/profile/claim-winning/_components/use-claimable-pools.ts
+++ b/src/app/(pages)/profile/claim-winning/_components/use-claimable-pools.ts
@@ -1,7 +1,7 @@
+import { useUserInfo } from '@/hooks/use-user-info'
+import { getConfig } from '@/providers/configs/wagmi.config'
import { useQuery } from '@tanstack/react-query'
import { fetchClaimablePools } from './fetch-claimable-pools'
-import { getConfig } from '@/app/_client/providers/configs/wagmi.config'
-import { useUserInfo } from '@/hooks/use-user-info'
export const useClaimablePools = () => {
const { data: user } = useUserInfo()
diff --git a/src/app/(pages)/profile/cross-swap/_components/ActionButton.tsx b/src/app/(pages)/profile/cross-swap/_components/ActionButton.tsx
index 515b0fc7..4182df0e 100644
--- a/src/app/(pages)/profile/cross-swap/_components/ActionButton.tsx
+++ b/src/app/(pages)/profile/cross-swap/_components/ActionButton.tsx
@@ -1,5 +1,3 @@
-'use client'
-
import { useState } from 'react'
import { toast } from 'sonner'
diff --git a/src/app/(pages)/profile/cross-swap/_components/FromSection.tsx b/src/app/(pages)/profile/cross-swap/_components/FromSection.tsx
index 3fa801b5..65bcd72b 100644
--- a/src/app/(pages)/profile/cross-swap/_components/FromSection.tsx
+++ b/src/app/(pages)/profile/cross-swap/_components/FromSection.tsx
@@ -1,5 +1,3 @@
-'use client'
-
import { ChevronDown } from 'lucide-react'
import Image from 'next/image'
import type { Network, OKXToken } from '../types'
diff --git a/src/app/(pages)/profile/cross-swap/_components/TokenSelector.tsx b/src/app/(pages)/profile/cross-swap/_components/TokenSelector.tsx
index a00196b6..7b156bd9 100644
--- a/src/app/(pages)/profile/cross-swap/_components/TokenSelector.tsx
+++ b/src/app/(pages)/profile/cross-swap/_components/TokenSelector.tsx
@@ -1,4 +1,4 @@
-import { Input } from '@/app/_components/ui/input'
+import { Input } from '@/components/ui/input'
import { Search, X } from 'lucide-react'
import Image from 'next/image'
import { useState } from 'react'
@@ -42,7 +42,6 @@ export const TokenSelector = ({
-
{/* Search input */}
@@ -55,7 +54,6 @@ export const TokenSelector = ({
/>
-
Select network: {selectedNetwork !== 'all' ? networkName : 'All'}
@@ -134,7 +132,6 @@ export const TokenSelector = ({
{isLoading ? (
@@ -182,5 +179,5 @@ export const TokenSelector = ({
)}
- )
+ );
}
diff --git a/src/app/(pages)/profile/cross-swap/_components/TransactionHistoryButton.tsx b/src/app/(pages)/profile/cross-swap/_components/TransactionHistoryButton.tsx
index c3adf790..211b67d0 100644
--- a/src/app/(pages)/profile/cross-swap/_components/TransactionHistoryButton.tsx
+++ b/src/app/(pages)/profile/cross-swap/_components/TransactionHistoryButton.tsx
@@ -1,8 +1,8 @@
-import { Button } from "@/app/_components/ui/button"
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/app/_components/ui/sheet"
-import { useState } from "react"
-import type { OKXNetwork, OKXToken, Transaction } from "../types"
-import { useTransactionHistory } from "./hooks/useTransactionHistory"
+import { Button } from '@/components/ui/button'
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
+import { useState } from 'react'
+import type { OKXNetwork, OKXToken, Transaction } from '../types'
+import { useTransactionHistory } from './hooks/useTransactionHistory'
interface TransactionHistoryButtonProps {
walletAddress?: string
@@ -15,7 +15,7 @@ export const TransactionHistoryButton = ({
walletAddress,
fetchedNetworks,
fetchedTokens,
- transactions,
+ // transactions,
}: TransactionHistoryButtonProps) => {
const [isOpen, setIsOpen] = useState(false)
const { refetchTransactions } = useTransactionHistory({
diff --git a/src/app/(pages)/profile/cross-swap/_components/balance-section.tsx b/src/app/(pages)/profile/cross-swap/_components/balance-section.tsx
index a8289e36..d8f49648 100644
--- a/src/app/(pages)/profile/cross-swap/_components/balance-section.tsx
+++ b/src/app/(pages)/profile/cross-swap/_components/balance-section.tsx
@@ -1,18 +1,47 @@
'use client'
-import { currentTokenAddress } from '@/app/_server/blockchain/server-config'
+import Container from '@/app/(pages)/profile/claim-winning/_components/container'
+import SectionContent from '@/app/(pages)/profile/claim-winning/_components/section-content'
+import { tokenAddress } from '@/types/contracts'
import { useWallets } from '@privy-io/react-auth'
import type { Address } from 'viem'
-import { useBalance } from 'wagmi'
-import Container from '../../claim-winning/_components/container'
-import SectionContent from '../../claim-winning/_components/section-content'
+import { useBalance, useChainId } from 'wagmi'
export default function ProfileBalanceSection() {
const { wallets } = useWallets()
+ const chainId = useChainId()
+
+ // Get chain-specific token address
+ const currentTokenAddress = tokenAddress[chainId as keyof typeof tokenAddress] as Address
+
+ // Get wallet address safely
+ const walletAddress = wallets[0]?.address as Address
+
+ // Only proceed with balance query if we have valid prerequisites
+ const canFetchBalance = Boolean(walletAddress && currentTokenAddress)
+
+ // Debug log for USDC balance request - only when we actually make the request
+ if (process.env.NODE_ENV === 'development' && canFetchBalance) {
+ console.log('[DEBUG][CrossSwapBalanceSection] useBalance USDC', {
+ address: walletAddress,
+ token: currentTokenAddress,
+ chainId,
+ stack: new Error().stack?.split('\n').slice(1, 3).join(' | '),
+ timestamp: new Date().toISOString(),
+ })
+ }
const { data: tokenBalanceData } = useBalance({
- address: wallets[0]?.address as Address,
+ address: walletAddress,
token: currentTokenAddress,
+ query: {
+ staleTime: 60_000, // Consider data fresh for 1 minute
+ gcTime: 300_000, // Keep in cache for 5 minutes
+ refetchOnWindowFocus: false,
+ refetchOnMount: false,
+ refetchInterval: false, // โ
DISABLED automatic polling to prevent excessive requests
+ enabled: canFetchBalance,
+ },
})
const decimals = BigInt(tokenBalanceData?.decimals ?? BigInt(18))
@@ -23,29 +52,10 @@ export default function ProfileBalanceSection() {