Stage manteca-integration

package.json

@@ -140,7 +140,8 @@
             "^@/(.*)$": "<rootDir>/src/$1",
             "^wagmi/chains$": "<rootDir>/src/utils/__mocks__/wagmi.ts",
             "^@squirrel-labs/peanut-sdk$": "<rootDir>/src/utils/__mocks__/peanut-sdk.ts",
-            "^next/cache$": "<rootDir>/src/utils/__mocks__/next-cache.ts"
+            "^next/cache$": "<rootDir>/src/utils/__mocks__/next-cache.ts",
+            "\\.(svg|png|jpg|jpeg|gif)$": "jest-transform-stub"
         },
         "setupFilesAfterEnv": [
             "<rootDir>/jest.setup.ts"

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

@@ -0,0 +1,21 @@
+'use client'
+import MantecaAddMoney from '@/components/AddMoney/components/MantecaAddMoney'
+import { CountryData, countryData } from '@/components/AddMoney/consts'
+import { MantecaSupportedExchanges } from '@/components/AddMoney/consts'
+import { useParams } from 'next/navigation'
+
+export default function AddMoneyRegionalMethodPage() {
+    const params = useParams()
+    const country = params.country as string
+    const method = params['regional-method'] as string
+
+    const countryDetails: CountryData | undefined = countryData.find((c) => c.path === country)
+
+    if (
+        MantecaSupportedExchanges[countryDetails?.id as keyof typeof MantecaSupportedExchanges] &&
+        method === 'manteca'
+    ) {
+        return <MantecaAddMoney source="regionalMethod" />
+    }
+    return null
+}

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

@@ -9,7 +9,6 @@ import { useOnrampFlow } from '@/context/OnrampFlowContext'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { formatAmount } from '@/utils'
 import { countryData } from '@/components/AddMoney/consts'
-import { InitiateKYCModal } from '@/components/Kyc'
 import { BridgeKycStatus } from '@/utils/bridge-accounts.utils'
 import { useWebSocket } from '@/hooks/useWebSocket'
 import { useAuth } from '@/context/authContext'
@@ -25,6 +24,7 @@ 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'
 
 type AddStep = 'inputAmount' | 'kyc' | 'loading' | 'collectUserDetails' | 'showDetails'
 
@@ -303,7 +303,7 @@ export default function OnrampBankPage() {
     if (step === 'kyc') {
         return (
             <div className="flex flex-col justify-start space-y-8">
-                <InitiateKYCModal
+                <InitiateBridgeKYCModal
                     isOpen={isKycModalOpen}
                     onClose={handleKycModalClose}
                     onKycSuccess={handleKycSuccess}

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

@@ -12,15 +12,13 @@ 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 { usePathname } from 'next/navigation'
-import { isKycStatusItem } from '@/hooks/useKycFlow'
+import { isKycStatusItem } from '@/hooks/useBridgeKycFlow'
 import React, { useEffect, useMemo, useRef } from 'react'
 
 /**
  * displays the user's transaction history with infinite scrolling and date grouping.
  */
 const HistoryPage = () => {
-    const pathname = usePathname()
     const loaderRef = useRef<HTMLDivElement>(null)
     const { user } = useUserStore()
 
@@ -63,17 +61,27 @@ const HistoryPage = () => {
     const allEntries = useMemo(() => historyData?.pages.flatMap((page) => page.entries) ?? [], [historyData])
 
     const combinedAndSortedEntries = useMemo(() => {
+        if (isLoading) {
+            return []
+        }
         const entries: Array<any> = [...allEntries]
 
-        if (
-            user?.user?.bridgeKycStatus &&
-            user.user.bridgeKycStatus !== 'not_started' &&
-            user.user.bridgeKycStartedAt
-        ) {
-            entries.push({
-                isKyc: true,
-                timestamp: user.user.bridgeKycStartedAt,
-                uuid: 'kyc-status-item',
+        if (user) {
+            if (user.user?.bridgeKycStatus && user.user.bridgeKycStatus !== 'not_started') {
+                entries.push({
+                    isKyc: true,
+                    timestamp: user.user.bridgeKycStartedAt ?? new Date(0).toISOString(),
+                    uuid: 'bridge-kyc-status-item',
+                    bridgeKycStatus: user.user.bridgeKycStatus,
+                })
+            }
+            user.user.kycVerifications?.forEach((verification) => {
+                entries.push({
+                    isKyc: true,
+                    timestamp: verification.approvedAt ?? new Date(0).toISOString(),
+                    uuid: verification.providerUserId ?? `${verification.provider}-${verification.mantecaGeo}`,
+                    verification,
+                })
             })
         }
 
@@ -84,7 +92,7 @@ const HistoryPage = () => {
         })
 
         return entries
-    }, [allEntries, user])
+    }, [allEntries, user, isLoading])
 
     if (isLoading && combinedAndSortedEntries.length === 0) {
         return <PeanutLoading />
@@ -101,7 +109,7 @@ const HistoryPage = () => {
         )
     }
 
-    if (combinedAndSortedEntries.length === 0) {
+    if (!isLoading && combinedAndSortedEntries.length === 0) {
         return (
             <div className="flex h-[80dvh] flex-col items-center justify-center">
                 <NavHeader title={'Activity'} />
@@ -151,7 +159,14 @@ const HistoryPage = () => {
                                 </div>
                             )}
                             {isKycStatusItem(item) ? (
-                                <KycStatusItem position={position} />
+                                <KycStatusItem
+                                    position={position}
+                                    verification={item.verification}
+                                    bridgeKycStatus={item.bridgeKycStatus}
+                                    bridgeKycStartedAt={
+                                        item.bridgeKycStatus ? user?.user.bridgeKycStartedAt : undefined
+                                    }
+                                />
                             ) : (
                                 (() => {
                                     const { transactionDetails, transactionCardType } =

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

@@ -24,7 +24,7 @@ import {
 } from '@/utils'
 import { useDisconnect } from '@reown/appkit/react'
 import Link from 'next/link'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState, useCallback } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { useAccount } from 'wagmi'
 import AddMoneyPromptModal from '@/components/Home/AddMoneyPromptModal'
@@ -38,6 +38,7 @@ import { PostSignupActionManager } from '@/components/Global/PostSignupActionMan
 import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
 import { useClaimBankFlow } from '@/context/ClaimBankFlowContext'
 import { useDeviceType, DeviceType } from '@/hooks/useGetDeviceType'
+import useKycStatus from '@/hooks/useKycStatus'
 import HomeBanners from '@/components/Home/HomeBanners'
 
 const BALANCE_WARNING_THRESHOLD = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_THRESHOLD ?? '500')
@@ -48,15 +49,16 @@ export default function Home() {
     const { resetFlow: resetClaimBankFlow } = useClaimBankFlow()
     const { resetWithdrawFlow } = useWithdrawFlow()
     const { deviceType } = useDeviceType()
+    const { user } = useUserStore()
     const [isBalanceHidden, setIsBalanceHidden] = useState(() => {
-        const prefs = getUserPreferences()
+        const prefs = user ? getUserPreferences(user.user.userId) : undefined
         return prefs?.balanceHidden ?? false
     })
     const { isConnected: isWagmiConnected } = useAccount()
     const { disconnect: disconnectWagmi } = useDisconnect()
 
     const { isFetchingUser, addAccount } = useAuth()
-    const { user } = useUserStore()
+    const { isUserKycApproved } = useKycStatus()
     const username = user?.user.username
 
     const [showIOSPWAInstallModal, setShowIOSPWAInstallModal] = useState(false)
@@ -70,14 +72,19 @@ export default function Home() {
         return user.user.fullName
     }, [user])
 
-    const handleToggleBalanceVisibility = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.stopPropagation()
-        setIsBalanceHidden((prev: boolean) => {
-            const newValue = !prev
-            updateUserPreferences({ balanceHidden: newValue })
-            return newValue
-        })
-    }
+    const handleToggleBalanceVisibility = useCallback(
+        (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation()
+            setIsBalanceHidden((prev: boolean) => {
+                const newValue = !prev
+                if (user) {
+                    updateUserPreferences(user.user.userId, { balanceHidden: newValue })
+                }
+                return newValue
+            })
+        },
+        [user]
+    )
 
     const isLoading = isFetchingUser && !username
 
@@ -210,11 +217,7 @@ export default function Home() {
         <PageContainer>
             <div className="h-full w-full space-y-6 p-5">
                 <div className="flex items-center justify-between gap-2">
-                    <UserHeader
-                        username={username!}
-                        fullName={userFullName}
-                        isVerified={user?.user.bridgeKycStatus === 'approved'}
-                    />
+                    <UserHeader username={username!} fullName={userFullName} isVerified={isUserKycApproved} />
                     <SearchUsers />
                 </div>
                 <div className="space-y-4">

src/app/(mobile-ui)/layout.tsx

@@ -26,7 +26,6 @@ const publicPathRegex = /^\/(request\/pay|claim|pay\/.+$|support)/
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
     const pathName = usePathname()
-    const router = useRouter()
     const { isFetchingUser, user } = useAuth()
     const [isReady, setIsReady] = useState(false)
     const [hasToken, setHasToken] = useState(false)
@@ -36,6 +35,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
     const isHistory = pathName === '/history'
     const isSupport = pathName === '/support'
     const alignStart = isHome || isHistory || isSupport
+    const router = useRouter()
 
     useEffect(() => {
         // check for JWT token

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

@@ -0,0 +1,12 @@
+import { generateMetadata } from '@/app/metadata'
+import PageContainer from '@/components/0_Bruddle/PageContainer'
+import React from 'react'
+
+export const metadata = generateMetadata({
+    title: 'QR Payment | Peanut',
+    description: 'Use Peanut to pay Argentinian MercadoPago and Brazilian Pix QR codes',
+})
+
+export default function QRPayLayout({ children }: { children: React.ReactNode }) {
+    return <PageContainer>{children}</PageContainer>
+}