chore: prod release 134 fe

src/app/(mobile-ui)/add-money/[country]/bank/page.tsx

@@ -9,31 +9,30 @@ import { useOnrampFlow } from '@/context/OnrampFlowContext'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { formatAmount } from '@/utils/general.utils'
 import { countryData } from '@/components/AddMoney/consts'
-import { type BridgeKycStatus } from '@/utils/bridge-accounts.utils'
-import { useWebSocket } from '@/hooks/useWebSocket'
 import { useAuth } from '@/context/authContext'
+import useKycStatus from '@/hooks/useKycStatus'
 import { useCreateOnramp } from '@/hooks/useCreateOnramp'
 import { useRouter, useParams } from 'next/navigation'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import countryCurrencyMappings, { isNonEuroSepaCountry, isUKCountry } from '@/constants/countryCurrencyMapping'
 import { formatUnits } from 'viem'
 import PeanutLoading from '@/components/Global/PeanutLoading'
 import EmptyState from '@/components/Global/EmptyStates/EmptyState'
-import { UserDetailsForm, type UserDetailsFormData } from '@/components/AddMoney/UserDetailsForm'
-import { updateUserById } from '@/app/actions/users'
 import AddMoneyBankDetails from '@/components/AddMoney/components/AddMoneyBankDetails'
 import { getCurrencyConfig, getCurrencySymbol, getMinimumAmount } from '@/utils/bridge.utils'
 import { OnrampConfirmationModal } from '@/components/AddMoney/components/OnrampConfirmationModal'
-import { InitiateBridgeKYCModal } from '@/components/Kyc/InitiateBridgeKYCModal'
 import InfoCard from '@/components/Global/InfoCard'
 import { useQueryStates, parseAsString, parseAsStringEnum } from 'nuqs'
 import { useLimitsValidation } from '@/features/limits/hooks/useLimitsValidation'
 import LimitsWarningCard from '@/features/limits/components/LimitsWarningCard'
 import { getLimitsWarningCardProps } from '@/features/limits/utils'
 import { useExchangeRate } from '@/hooks/useExchangeRate'
+import { useMultiPhaseKycFlow } from '@/hooks/useMultiPhaseKycFlow'
+import { SumsubKycModals } from '@/components/Kyc/SumsubKycModals'
+import { InitiateKycModal } from '@/components/Kyc/InitiateKycModal'
 
 // Step type for URL state
-type BridgeBankStep = 'inputAmount' | 'kyc' | 'collectUserDetails' | 'showDetails'
+type BridgeBankStep = 'inputAmount' | 'showDetails'
 
 export default function OnrampBankPage() {
     const router = useRouter()
@@ -43,7 +42,7 @@ export default function OnrampBankPage() {
     // Example: /add-money/mexico/bank?step=inputAmount&amount=500
     const [urlState, setUrlState] = useQueryStates(
         {
-            step: parseAsStringEnum<BridgeBankStep>(['inputAmount', 'kyc', 'collectUserDetails', 'showDetails']),
+            step: parseAsStringEnum<BridgeBankStep>(['inputAmount', 'showDetails']),
             amount: parseAsString,
         },
         { history: 'push' }
@@ -54,20 +53,23 @@ export default function OnrampBankPage() {
 
     // Local UI state (not URL-appropriate - transient)
     const [showWarningModal, setShowWarningModal] = useState<boolean>(false)
+    const [showKycModal, setShowKycModal] = useState<boolean>(false)
     const [isRiskAccepted, setIsRiskAccepted] = useState<boolean>(false)
-    const [isKycModalOpen, setIsKycModalOpen] = useState(false)
-    const [liveKycStatus, setLiveKycStatus] = useState<BridgeKycStatus | undefined>(undefined)
-    const [isUpdatingUser, setIsUpdatingUser] = useState(false)
-    const [userUpdateError, setUserUpdateError] = useState<string | null>(null)
-    const [isUserDetailsFormValid, setIsUserDetailsFormValid] = useState(false)
-
     const { setError, error, setOnrampData, onrampData } = useOnrampFlow()
-    const formRef = useRef<{ handleSubmit: () => void }>(null)
 
     const { balance } = useWallet()
     const { user, fetchUser } = useAuth()
     const { createOnramp, isLoading: isCreatingOnramp, error: onrampError } = useCreateOnramp()
 
+    // inline sumsub kyc flow for bridge bank onramp
+    // regionIntent is NOT passed here to avoid creating a backend record on mount.
+    // intent is passed at call time: handleInitiateKyc('STANDARD')
+    const sumsubFlow = useMultiPhaseKycFlow({
+        onKycSuccess: () => {
+            setUrlState({ step: 'inputAmount' })
+        },
+    })
+
     const selectedCountryPath = params.country as string
 
     const selectedCountry = useMemo(() => {
@@ -87,19 +89,7 @@ export default function OnrampBankPage() {
     // uk-specific check
     const isUK = isUKCountry(selectedCountryPath)
 
-    useWebSocket({
-        username: user?.user.username ?? undefined,
-        autoConnect: !!user?.user.username,
-        onKycStatusUpdate: (newStatus) => {
-            setLiveKycStatus(newStatus as BridgeKycStatus)
-        },
-    })
-
-    useEffect(() => {
-        if (user?.user.bridgeKycStatus) {
-            setLiveKycStatus(user.user.bridgeKycStatus as BridgeKycStatus)
-        }
-    }, [user?.user.bridgeKycStatus])
+    const { isUserKycApproved } = useKycStatus()
 
     useEffect(() => {
         fetchUser()
@@ -150,30 +140,12 @@ export default function OnrampBankPage() {
         currency: 'USD',
     })
 
-    // Determine initial step based on KYC status (only when URL has no step)
+    // Default to inputAmount step when no step in URL
     useEffect(() => {
-        // If URL already has a step, respect it (allows deep linking)
         if (urlState.step) return
-
-        // Wait for user to be fetched before determining initial step
         if (user === null) return
-
-        const currentKycStatus = liveKycStatus || user?.user.bridgeKycStatus
-        const isUserKycVerified = currentKycStatus === 'approved'
-
-        if (!isUserKycVerified) {
-            setUrlState({ step: 'collectUserDetails' })
-        } else {
-            setUrlState({ step: 'inputAmount' })
-        }
-    }, [liveKycStatus, user, urlState.step, setUrlState])
-
-    // Handle KYC completion
-    useEffect(() => {
-        if (urlState.step === 'kyc' && liveKycStatus === 'approved') {
-            setUrlState({ step: 'inputAmount' })
-        }
-    }, [liveKycStatus, urlState.step, setUrlState])
+        setUrlState({ step: 'inputAmount' })
+    }, [user, urlState.step, setUrlState])
 
     const validateAmount = useCallback(
         (amountStr: string): boolean => {
@@ -215,9 +187,14 @@ export default function OnrampBankPage() {
     }, [rawTokenAmount, validateAmount, setError])
 
     const handleAmountContinue = () => {
-        if (validateAmount(rawTokenAmount)) {
-            setShowWarningModal(true)
+        if (!validateAmount(rawTokenAmount)) return
+
+        if (!isUserKycApproved) {
+            setShowKycModal(true)
+            return
         }
+
+        setShowWarningModal(true)
     }
 
     const handleWarningConfirm = async () => {
@@ -261,39 +238,6 @@ export default function OnrampBankPage() {
         setIsRiskAccepted(false)
     }
 
-    const handleKycSuccess = () => {
-        setIsKycModalOpen(false)
-        setUrlState({ step: 'inputAmount' })
-    }
-
-    const handleKycModalClose = () => {
-        setIsKycModalOpen(false)
-    }
-
-    const handleUserDetailsSubmit = async (data: UserDetailsFormData) => {
-        setIsUpdatingUser(true)
-        setUserUpdateError(null)
-        try {
-            if (!user?.user.userId) throw new Error('User not found')
-            const result = await updateUserById({
-                userId: user.user.userId,
-                fullName: data.fullName,
-                email: data.email,
-            })
-            if (result.error) {
-                throw new Error(result.error)
-            }
-            await fetchUser()
-            setUrlState({ step: 'kyc' })
-        } catch (error: any) {
-            setUserUpdateError(error.message)
-            return { error: error.message }
-        } finally {
-            setIsUpdatingUser(false)
-        }
-        return {}
-    }
-
     const handleBack = () => {
         if (selectedCountry) {
             router.push(`/add-money/${selectedCountry.path}`)
@@ -302,20 +246,6 @@ export default function OnrampBankPage() {
         }
     }
 
-    const initialUserDetails: Partial<UserDetailsFormData> = useMemo(
-        () => ({
-            fullName: user?.user.fullName ?? '',
-            email: user?.user.email ?? '',
-        }),
-        [user?.user.fullName, user?.user.email]
-    )
-
-    useEffect(() => {
-        if (urlState.step === 'kyc') {
-            setIsKycModalOpen(true)
-        }
-    }, [urlState.step])
-
     // Redirect to inputAmount if showDetails is accessed without required data (deep link / back navigation)
     useEffect(() => {
         if (urlState.step === 'showDetails' && !onrampData?.transferId) {
@@ -342,49 +272,6 @@ export default function OnrampBankPage() {
         return <PeanutLoading />
     }
 
-    if (urlState.step === 'collectUserDetails') {
-        return (
-            <div className="flex flex-col justify-start space-y-8">
-                <NavHeader onPrev={handleBack} title="Identity Verification" />
-                <div className="flex flex-grow flex-col justify-center space-y-4">
-                    <h3 className="text-sm font-bold">Verify your details</h3>
-                    <UserDetailsForm
-                        ref={formRef}
-                        onSubmit={handleUserDetailsSubmit}
-                        isSubmitting={isUpdatingUser}
-                        onValidChange={setIsUserDetailsFormValid}
-                        initialData={initialUserDetails}
-                    />
-                    <Button
-                        onClick={() => formRef.current?.handleSubmit()}
-                        loading={isUpdatingUser}
-                        variant="purple"
-                        shadowSize="4"
-                        className="w-full"
-                        disabled={!isUserDetailsFormValid || isUpdatingUser}
-                    >
-                        Continue
-                    </Button>
-                    {userUpdateError && <ErrorAlert description={userUpdateError} />}
-                </div>
-            </div>
-        )
-    }
-
-    if (urlState.step === 'kyc') {
-        return (
-            <div className="flex flex-col justify-start space-y-8">
-                <InitiateBridgeKYCModal
-                    isOpen={isKycModalOpen}
-                    onClose={handleKycModalClose}
-                    onKycSuccess={handleKycSuccess}
-                    onManualClose={() => router.push(`/add-money/${selectedCountry.path}`)}
-                    flow="add"
-                />
-            </div>
-        )
-    }
-
     if (urlState.step === 'showDetails') {
         // Show loading while useEffect redirects if data is missing
         if (!onrampData?.transferId) {
@@ -477,6 +364,18 @@ export default function OnrampBankPage() {
                     amount={rawTokenAmount}
                     currency={getCurrencySymbol(getCurrencyConfig(selectedCountry.id, 'onramp').currency)}
                 />
+
+                <InitiateKycModal
+                    visible={showKycModal}
+                    onClose={() => setShowKycModal(false)}
+                    onVerify={async () => {
+                        await sumsubFlow.handleInitiateKyc('STANDARD')
+                        setShowKycModal(false)
+                    }}
+                    isLoading={sumsubFlow.isLoading}
+                />
+
+                <SumsubKycModals flow={sumsubFlow} autoStartSdk />
             </div>
         )
     }

src/app/(mobile-ui)/history/page.tsx

@@ -12,7 +12,8 @@ import { useTransactionHistory } from '@/hooks/useTransactionHistory'
 import { useUserStore } from '@/redux/hooks'
 import { formatGroupHeaderDate, getDateGroup, getDateGroupKey } from '@/utils/dateGrouping.utils'
 import * as Sentry from '@sentry/nextjs'
-import { isKycStatusItem } from '@/hooks/useBridgeKycFlow'
+import { isKycStatusItem } from '@/components/Kyc/KycStatusItem'
+import { groupKycByRegion } from '@/utils/kyc-grouping.utils'
 import { useAuth } from '@/context/authContext'
 import { BadgeStatusItem } from '@/components/Badges/BadgeStatusItem'
 import { isBadgeHistoryItem } from '@/components/Badges/badge.types'
@@ -140,6 +141,10 @@ const HistoryPage = () => {
             console.log('KYC status updated via WebSocket:', newStatus)
             await fetchUser()
         },
+        onSumsubKycStatusUpdate: async (newStatus: string) => {
+            console.log('Sumsub KYC status updated via WebSocket:', newStatus)
+            await fetchUser()
+        },
     })
 
     const allEntries = useMemo(() => historyData?.pages.flatMap((page) => page.entries) ?? [], [historyData])
@@ -165,30 +170,10 @@ const HistoryPage = () => {
             })
         })
 
-        if (user) {
-            if (user.user?.bridgeKycStatus && user.user.bridgeKycStatus !== 'not_started') {
-                // Use appropriate timestamp based on KYC status
-                const bridgeKycTimestamp = (() => {
-                    const status = user.user.bridgeKycStatus
-                    if (status === 'approved') return user.user.bridgeKycApprovedAt
-                    if (status === 'rejected') return user.user.bridgeKycRejectedAt
-                    return user.user.bridgeKycStartedAt
-                })()
-                entries.push({
-                    isKyc: true,
-                    timestamp: bridgeKycTimestamp ?? user.user.createdAt ?? new Date().toISOString(),
-                    uuid: 'bridge-kyc-status-item',
-                    bridgeKycStatus: user.user.bridgeKycStatus,
-                })
-            }
-            user.user.kycVerifications?.forEach((verification) => {
-                entries.push({
-                    isKyc: true,
-                    timestamp: verification.approvedAt ?? verification.updatedAt ?? verification.createdAt,
-                    uuid: verification.providerUserId ?? `${verification.provider}-${verification.mantecaGeo}`,
-                    verification,
-                })
-            })
+        // add one kyc entry per region (STANDARD, LATAM)
+        if (user?.user) {
+            const regionEntries = groupKycByRegion(user.user)
+            entries.push(...regionEntries)
         }
 
         entries.sort((a, b) => {
@@ -272,6 +257,7 @@ const HistoryPage = () => {
                                     bridgeKycStartedAt={
                                         item.bridgeKycStatus ? user?.user.bridgeKycStartedAt : undefined
                                     }
+                                    region={item.region}
                                 />
                             ) : isBadgeHistoryItem(item) ? (
                                 <BadgeStatusItem position={position} entry={item} />

src/app/(mobile-ui)/home/page.tsx

@@ -10,7 +10,7 @@ import { UserHeader } from '@/components/UserHeader'
 import { useAuth } from '@/context/authContext'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { useUserStore } from '@/redux/hooks'
-import { formatExtendedNumber, getUserPreferences, updateUserPreferences, getRedirectUrl } from '@/utils/general.utils'
+import { formatExtendedNumber, getUserPreferences, updateUserPreferences } from '@/utils/general.utils'
 import { printableUsdc } from '@/utils/balance.utils'
 import { useDisconnect } from '@reown/appkit/react'
 import Link from 'next/link'
@@ -24,7 +24,7 @@ import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
 import { PostSignupActionManager } from '@/components/Global/PostSignupActionManager'
 import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
 import { useClaimBankFlow } from '@/context/ClaimBankFlowContext'
-import { useDeviceType, DeviceType } from '@/hooks/useGetDeviceType'
+import { useDeviceType } from '@/hooks/useGetDeviceType'
 import { useNotifications } from '@/hooks/useNotifications'
 import useKycStatus from '@/hooks/useKycStatus'
 import { useCardPioneerInfo } from '@/hooks/useCardPioneerInfo'

src/app/(mobile-ui)/points/invites/page.tsx

@@ -86,7 +86,7 @@ const InvitesPage = () => {
                     {invites?.invitees?.map((invite: PointsInvite, i: number) => {
                         const username = invite.username
                         const fullName = invite.fullName
-                        const isVerified = invite.kycStatus === 'approved'
+                        const isVerified = invite.kycVerified
                         const pointsEarned = invite.contributedPoints ?? 0
                         // respect user's showFullName preference for avatar and display name
                         const displayName = invite.showFullName && fullName ? fullName : username

src/app/(mobile-ui)/points/page.tsx

@@ -238,7 +238,7 @@ const PointsPage = () => {
                             {invites.invitees?.slice(0, 5).map((invite: PointsInvite, i: number) => {
                                 const username = invite.username
                                 const fullName = invite.fullName
-                                const isVerified = invite.kycStatus === 'approved'
+                                const isVerified = invite.kycVerified
                                 const pointsEarned = invite.contributedPoints ?? 0
                                 // respect user's showFullName preference for avatar and display name
                                 const displayName = invite.showFullName && fullName ? fullName : username