feat: kyc 2.0 frontend

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)/profile/identity-verification/layout.tsx

@@ -1,59 +1,7 @@
 'use client'
 
 import PageContainer from '@/components/0_Bruddle/PageContainer'
-import ActionModal from '@/components/Global/ActionModal'
-import { useIdentityVerification } from '@/hooks/useIdentityVerification'
-import { useParams, useRouter } from 'next/navigation'
-import { useEffect, useState } from 'react'
 
 export default function IdentityVerificationLayout({ children }: { children: React.ReactNode }) {
-    const [isAlreadyVerifiedModalOpen, setIsAlreadyVerifiedModalOpen] = useState(false)
-    const router = useRouter()
-    const { isRegionAlreadyUnlocked, isVerifiedForCountry } = useIdentityVerification()
-    const params = useParams()
-    const regionParams = params.region as string
-    const countryParams = params.country as string
-
-    useEffect(() => {
-        const isAlreadyVerified =
-            (countryParams && isVerifiedForCountry(countryParams)) ||
-            (regionParams && isRegionAlreadyUnlocked(regionParams))
-
-        if (isAlreadyVerified) {
-            setIsAlreadyVerifiedModalOpen(true)
-        }
-    }, [countryParams, regionParams, isVerifiedForCountry, isRegionAlreadyUnlocked])
-
-    return (
-        <PageContainer>
-            {children}
-
-            <ActionModal
-                visible={isAlreadyVerifiedModalOpen}
-                onClose={() => {
-                    setIsAlreadyVerifiedModalOpen(false)
-                    router.push('/profile')
-                }}
-                title="You're already verified"
-                description={
-                    <p>
-                        Your identity has already been successfully verified for this region. You can continue to use
-                        features available in this region. No further action is needed.
-                    </p>
-                }
-                icon="shield"
-                ctas={[
-                    {
-                        text: 'Close',
-                        shadowSize: '4',
-                        className: 'md:py-2',
-                        onClick: () => {
-                            setIsAlreadyVerifiedModalOpen(false)
-                            router.push('/profile')
-                        },
-                    },
-                ]}
-            />
-        </PageContainer>
-    )
+    return <PageContainer>{children}</PageContainer>
 }

src/app/(mobile-ui)/qr-pay/page.tsx

@@ -2,7 +2,7 @@
 
 import { useSearchParams, useRouter } from 'next/navigation'
 import { useState, useCallback, useMemo, useEffect, useContext, useRef } from 'react'
-import { PeanutDoesntStoreAnyPersonalInformation } from '@/components/Kyc/KycVerificationInProgressModal'
+import { PeanutDoesntStoreAnyPersonalInformation } from '@/components/Kyc/PeanutDoesntStoreAnyPersonalInformation'
 import Card from '@/components/Global/Card'
 import { Button } from '@/components/0_Bruddle/Button'
 import { Icon } from '@/components/Global/Icons/Icon'

src/app/actions/sumsub.ts

@@ -0,0 +1,54 @@
+'use server'
+
+import { type InitiateSumsubKycResponse, type KYCRegionIntent } from './types/sumsub.types'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
+import { getJWTCookie } from '@/utils/cookie-migration.utils'
+
+const API_KEY = process.env.PEANUT_API_KEY!
+
+// initiate kyc flow (using sumsub) and get websdk access token
+export const initiateSumsubKyc = async (params?: {
+    regionIntent?: KYCRegionIntent
+    levelName?: string
+}): Promise<{ data?: InitiateSumsubKycResponse; error?: string }> => {
+    const jwtToken = (await getJWTCookie())?.value
+
+    if (!jwtToken) {
+        return { error: 'Authentication required' }
+    }
+
+    const body: Record<string, string | undefined> = {
+        regionIntent: params?.regionIntent,
+        levelName: params?.levelName,
+    }
+
+    try {
+        const response = await fetchWithSentry(`${PEANUT_API_URL}/users/identity`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${jwtToken}`,
+                'api-key': API_KEY,
+            },
+            body: JSON.stringify(body),
+        })
+
+        const responseJson = await response.json()
+
+        if (!response.ok) {
+            return { error: responseJson.message || responseJson.error || 'Failed to initiate identity verification' }
+        }
+
+        return {
+            data: {
+                token: responseJson.token,
+                applicantId: responseJson.applicantId,
+                status: responseJson.status,
+            },
+        }
+    } catch (e: unknown) {
+        const message = e instanceof Error ? e.message : 'An unexpected error occurred'
+        return { error: message }
+    }
+}

src/app/actions/types/sumsub.types.ts

@@ -0,0 +1,9 @@
+export interface InitiateSumsubKycResponse {
+    token: string | null // null when user is already APPROVED
+    applicantId: string | null
+    status: SumsubKycStatus
+}
+
+export type SumsubKycStatus = 'NOT_STARTED' | 'PENDING' | 'IN_REVIEW' | 'APPROVED' | 'REJECTED' | 'ACTION_REQUIRED'
+
+export type KYCRegionIntent = 'STANDARD' | 'LATAM'

src/app/actions/users.ts

@@ -160,3 +160,47 @@ export async function getContacts(params: {
         return { error: e instanceof Error ? e.message : 'An unexpected error occurred' }
     }
 }
+
+// fetch bridge ToS acceptance link for users with pending ToS
+export const getBridgeTosLink = async (): Promise<{ data?: { tosLink: string }; error?: string }> => {
+    const jwtToken = (await getJWTCookie())?.value
+    try {
+        const response = await fetchWithSentry(`${PEANUT_API_URL}/users/bridge-tos-link`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${jwtToken}`,
+                'api-key': API_KEY,
+            },
+        })
+        const responseJson = await response.json()
+        if (!response.ok) {
+            return { error: responseJson.error || 'Failed to fetch Bridge ToS link' }
+        }
+        return { data: responseJson }
+    } catch (e: unknown) {
+        return { error: e instanceof Error ? e.message : 'An unexpected error occurred' }
+    }
+}
+
+// confirm bridge ToS acceptance after user closes the ToS iframe
+export const confirmBridgeTos = async (): Promise<{ data?: { accepted: boolean }; error?: string }> => {
+    const jwtToken = (await getJWTCookie())?.value
+    try {
+        const response = await fetchWithSentry(`${PEANUT_API_URL}/users/bridge-tos-confirm`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${jwtToken}`,
+                'api-key': API_KEY,
+            },
+        })
+        const responseJson = await response.json()
+        if (!response.ok) {
+            return { error: responseJson.error || 'Failed to confirm Bridge ToS' }
+        }
+        return { data: responseJson }
+    } catch (e: unknown) {
+        return { error: e instanceof Error ? e.message : 'An unexpected error occurred' }
+    }
+}

src/components/Global/Badges/StatusBadge.tsx

@@ -41,6 +41,10 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className, size = 'sm
     }
 
     const getStatusText = () => {
+        // customText overrides the default label for any status type,
+        // allowing callers to use a specific status style with custom text
+        if (customText) return customText
+
         switch (status) {
             case 'completed':
                 return 'Completed'
@@ -59,7 +63,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className, size = 'sm
             case 'closed':
                 return 'Closed'
             case 'custom':
-                return customText
+                return 'Custom'
             default:
                 return status
         }

src/components/Global/IframeWrapper/StartVerificationView.tsx

@@ -33,10 +33,11 @@ const StartVerificationView = ({
                 <h1 className="text-3xl font-extrabold">Secure Verification. Limited Data Use.</h1>
                 <div>
                     <p className="mt-2 text-lg font-medium">
-                        The verification is done by Persona, which only shares a yes/no with Peanut.
+                        The verification is done using a trusted provider, which shares your verification status with
+                        Peanut.
                     </p>
                     <p className="text-lg font-medium">
-                        Persona is trusted by millions and it operates under strict security and privacy standards.
+                        It operates under industry-standard security and privacy practices.
                     </p>
                     <p className="text-lg font-bold">Peanut never sees or stores your verification data.</p>
                 </div>

src/components/Home/HomeHistory.tsx

@@ -14,7 +14,9 @@ import Card from '../Global/Card'
 import { type CardPosition, getCardPosition } from '../Global/Card/card.utils'
 import EmptyState from '../Global/EmptyStates/EmptyState'
 import { KycStatusItem } from '../Kyc/KycStatusItem'
+import { BridgeTosReminder } from '../Kyc/BridgeTosReminder'
 import { isKycStatusItem, type KycHistoryEntry } from '@/hooks/useBridgeKycFlow'
+import { useBridgeTosStatus } from '@/hooks/useBridgeTosStatus'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { BadgeStatusItem } from '@/components/Badges/BadgeStatusItem'
 import { isBadgeHistoryItem } from '@/components/Badges/badge.types'
@@ -43,6 +45,7 @@ const HomeHistory = ({ username, hideTxnAmount = false }: { username?: string; h
     const { fetchBalance } = useWallet()
     const { triggerHaptic } = useHaptic()
     const { fetchUser } = useAuth()
+    const { needsBridgeTos } = useBridgeTosStatus()
 
     const isViewingOwnHistory = useMemo(
         () => (isLoggedIn && !username) || (isLoggedIn && username === user?.user.username),
@@ -270,6 +273,7 @@ const HomeHistory = ({ username, hideTxnAmount = false }: { username?: string; h
         return (
             <div className="mx-auto mt-6 w-full space-y-3 md:max-w-2xl">
                 <h2 className="text-base font-bold">Activity</h2>
+                {isViewingOwnHistory && needsBridgeTos && <BridgeTosReminder />}
                 {isViewingOwnHistory &&
                     ((user?.user.bridgeKycStatus && user?.user.bridgeKycStatus !== 'not_started') ||
                         (user?.user.kycVerifications && user?.user.kycVerifications.length > 0)) && (
@@ -317,6 +321,9 @@ const HomeHistory = ({ username, hideTxnAmount = false }: { username?: string; h
 
     return (
         <div className={twMerge('mx-auto w-full space-y-3 md:max-w-2xl md:space-y-3', isLoggedIn ? 'pb-4' : 'pb-0')}>
+            {/* bridge ToS reminder for users who haven't accepted yet */}
+            {isViewingOwnHistory && needsBridgeTos && <BridgeTosReminder />}
+
             {/* link to the full history page */}
             {pendingRequests.length > 0 && (
                 <>

src/components/Home/KycCompletedModal/index.tsx

@@ -13,22 +13,25 @@ const KycCompletedModal = ({ isOpen, onClose }: { isOpen: boolean; onClose: () =
     const { user } = useAuth()
     const [approvedCountryData, setApprovedCountryData] = useState<CountryData | null>(null)
 
-    const { isUserBridgeKycApproved, isUserMantecaKycApproved } = useKycStatus()
+    const { isUserBridgeKycApproved, isUserMantecaKycApproved, isUserSumsubKycApproved } = useKycStatus()
     const { getVerificationUnlockItems } = useIdentityVerification()
 
     const kycApprovalType = useMemo(() => {
+        // sumsub covers all regions, treat as 'all'
+        if (isUserSumsubKycApproved) {
+            return 'all'
+        }
         if (isUserBridgeKycApproved && isUserMantecaKycApproved) {
             return 'all'
         }
-
         if (isUserBridgeKycApproved) {
             return 'bridge'
         }
         if (isUserMantecaKycApproved) {
             return 'manteca'
         }
         return 'none'
-    }, [isUserBridgeKycApproved, isUserMantecaKycApproved])
+    }, [isUserBridgeKycApproved, isUserMantecaKycApproved, isUserSumsubKycApproved])
 
     const items = useMemo(() => {
         return getVerificationUnlockItems(approvedCountryData?.title)