From a8084e88f10736cb3d20645422d31b51e4580a57 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Wed, 5 Nov 2025 13:06:01 +0530 Subject: [PATCH 001/121] Fix: Request fulfillment through bank --- .../components/AddMoneyBankDetails.tsx | 8 ++--- src/components/Common/ActionList.tsx | 35 +++++++++++++------ src/components/Common/CountryListRouter.tsx | 12 ++++--- 3 files changed, 35 insertions(+), 20 deletions(-) diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index 3af007325..9e970d76a 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -83,7 +83,9 @@ export default function AddMoneyBankDetails({ flow = 'add-money' }: IAddMoneyBan }) // data from contexts based on flow - const amount = isAddMoneyFlow ? onrampContext.amountToOnramp : chargeDetails?.tokenAmount + const amount = isAddMoneyFlow + ? onrampContext.amountToOnramp + : requestFulfilmentOnrampData?.depositInstructions?.amount const onrampData = isAddMoneyFlow ? onrampContext.onrampData : requestFulfilmentOnrampData const currencySymbolBasedOnCountry = useMemo(() => { @@ -137,10 +139,6 @@ export default function AddMoneyBankDetails({ flow = 'add-money' }: IAddMoneyBan const formattedCurrencyAmount = useMemo(() => { if (!amount) return '' - if (flow === 'request-fulfillment') { - return formatCurrencyAmount(amount, 'USD') // Request fulfillment flow is in USD - } - return formatCurrencyAmount(amount, onrampCurrency) }, [amount, onrampCurrency, flow]) diff --git a/src/components/Common/ActionList.tsx b/src/components/Common/ActionList.tsx index bb891a05d..f2a0f95cf 100644 --- a/src/components/Common/ActionList.tsx +++ b/src/components/Common/ActionList.tsx @@ -34,6 +34,7 @@ import { ActionListCard } from '../ActionListCard' import { useGeoFilteredPaymentOptions } from '@/hooks/useGeoFilteredPaymentOptions' import { tokenSelectorContext } from '@/context' import SupportCTA from '../Global/SupportCTA' +import { usePaymentInitiator, type InitiatePaymentPayload } from '@/hooks/usePaymentInitiator' interface IActionListProps { flow: 'claim' | 'request' @@ -74,11 +75,10 @@ export default function ActionList({ const { balance } = useWallet() const [showMinAmountError, setShowMinAmountError] = useState(false) const { claimType } = useDetermineBankClaimType(claimLinkData?.sender?.userId ?? '') - const { chargeDetails } = usePaymentStore() + const { chargeDetails, usdAmount, parsedPaymentData } = usePaymentStore() const requesterUserId = chargeDetails?.requestLink?.recipientAccount?.userId ?? '' const { requestType } = useDetermineBankRequestType(requesterUserId) const savedAccounts = useSavedAccounts() - const { usdAmount } = usePaymentStore() const { addParamStep } = useClaimLink() const { setShowRequestFulfilmentBankFlowManager, @@ -102,6 +102,7 @@ export default function ActionList({ const [isUsePeanutBalanceModalShown, setIsUsePeanutBalanceModalShown] = useState(false) const [showUsePeanutBalanceModal, setShowUsePeanutBalanceModal] = useState(false) const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null) + const { initiatePayment } = usePaymentInitiator() const dispatch = useAppDispatch() @@ -190,15 +191,15 @@ export default function ActionList({ } } else if (flow === 'request' && requestLinkData) { // @dev TODO: Fix req fulfillment with bank properly post devconnect - if (method.id === 'bank') { - if (user?.user) { - router.push('/add-money') - } else { - const redirectUri = encodeURIComponent('/add-money') - router.push(`/setup?redirect_uri=${redirectUri}`) - } - return - } + // if (method.id === 'bank') { + // if (user?.user) { + // router.push('/add-money') + // } else { + // const redirectUri = encodeURIComponent('/add-money') + // router.push(`/setup?redirect_uri=${redirectUri}`) + // } + // return + // } switch (method.id) { case 'bank': @@ -206,6 +207,18 @@ export default function ActionList({ addParamStep('bank') setIsGuestVerificationModalOpen(true) } else { + if (!chargeDetails && parsedPaymentData) { + const payload: InitiatePaymentPayload = { + recipient: parsedPaymentData?.recipient, + tokenAmount: usdAmount ?? '0', + isExternalWalletFlow: false, + transactionType: 'REQUEST', + returnAfterChargeCreation: true, + } + + await initiatePayment(payload) + } + setShowRequestFulfilmentBankFlowManager(true) setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.BankCountryList) } diff --git a/src/components/Common/CountryListRouter.tsx b/src/components/Common/CountryListRouter.tsx index bc4e3a0c2..c5b46624a 100644 --- a/src/components/Common/CountryListRouter.tsx +++ b/src/components/Common/CountryListRouter.tsx @@ -109,10 +109,14 @@ export const CountryListRouter = ({ case 'claim': return claimLinkData?.sender?.username ?? printableAddress(claimLinkData?.senderAddress ?? '') case 'request': - return ( - chargeDetails?.requestLink.recipientAccount.user.username ?? - printableAddress(chargeDetails?.requestLink.recipientAddress as string) - ) + if (chargeDetails?.requestLink.recipientAccount.type === 'peanut-wallet') { + return ( + chargeDetails?.requestLink.recipientAccount.user.username ?? + printableAddress(chargeDetails?.requestLink.recipientAddress as string) + ) + } else { + return printableAddress(chargeDetails?.requestLink.recipientAccount.identifier as string) + } } }, [flow, claimLinkData, chargeDetails]) From 8440549309a602490faf5fbcbcf60a068d64ceed Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 12:40:29 -0300 Subject: [PATCH 002/121] feat: useContacts hook --- src/hooks/useContacts.ts | 55 +++++++++++++++++++++++++++++++++++++ src/hooks/useRecentUsers.ts | 37 ------------------------- 2 files changed, 55 insertions(+), 37 deletions(-) create mode 100644 src/hooks/useContacts.ts delete mode 100644 src/hooks/useRecentUsers.ts diff --git a/src/hooks/useContacts.ts b/src/hooks/useContacts.ts new file mode 100644 index 000000000..720323fcc --- /dev/null +++ b/src/hooks/useContacts.ts @@ -0,0 +1,55 @@ +'use client' +import { useQuery } from '@tanstack/react-query' +import Cookies from 'js-cookie' +import { PEANUT_API_URL } from '@/constants' +import { CONTACTS } from '@/constants/query.consts' +import { fetchWithSentry } from '@/utils' + +export interface Contact { + userId: string + username: string + fullName: string | null + bridgeKycStatus: string + showFullName: boolean + relationshipTypes: ('inviter' | 'invitee' | 'sent_money' | 'received_money')[] + firstInteractionDate: string + lastInteractionDate: string + transactionCount: number +} + +interface ContactsResponse { + contacts: Contact[] +} + +/** + * hook to fetch all contacts for the current user + * includes inviter, invitees, and all transaction counterparties + */ +export function useContacts() { + const { data, isLoading, error, refetch } = useQuery({ + queryKey: [CONTACTS], + queryFn: async (): Promise => { + const response = await fetchWithSentry(`${PEANUT_API_URL}/users/contacts`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${Cookies.get('jwt-token')}`, + }, + }) + + if (!response.ok) { + throw new Error(`Failed to fetch contacts: ${response.statusText}`) + } + + return response.json() + }, + staleTime: 5 * 60 * 1000, // 5 minutes + }) + + return { + contacts: data?.contacts || [], + isLoading, + error, + refetch, + } +} diff --git a/src/hooks/useRecentUsers.ts b/src/hooks/useRecentUsers.ts deleted file mode 100644 index e403618f5..000000000 --- a/src/hooks/useRecentUsers.ts +++ /dev/null @@ -1,37 +0,0 @@ -'use client' -import { useMemo } from 'react' -import { useTransactionHistory, type HistoryEntry } from '@/hooks/useTransactionHistory' -import { type RecentUser } from '@/services/users' - -export function useRecentUsers() { - const { data, isLoading } = useTransactionHistory({ mode: 'latest', limit: 20 }) - - const recentTransactions = useMemo(() => { - if (!data) { - return [] - } - return data.entries.reduce((acc: RecentUser[], entry: HistoryEntry) => { - let account - if (entry.userRole === 'SENDER') { - account = entry.recipientAccount - } else if (entry.userRole === 'RECIPIENT') { - account = entry.senderAccount - } - if (!account?.isUser || !account.username) return acc - const isDuplicate = acc.some( - (user) => - user.userId === account.userId || user.username.toLowerCase() === account.username.toLowerCase() - ) - if (isDuplicate) return acc - acc.push({ - userId: account.userId!, - username: account.username!, - fullName: account.fullName!, - bridgeKycStatus: entry.isVerified ? 'approved' : 'not_started', - }) - return acc - }, []) - }, [data]) - - return { recentTransactions, isFetchingRecentUsers: isLoading } -} From 3c524e0905e9dd6e66f49f62e7413dd56beafec1 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 12:41:05 -0300 Subject: [PATCH 003/121] feat: abstract contacts view to separate comp --- .../Global/EmptyStates/EmptyState.tsx | 6 +- src/components/Send/views/Contacts.view.tsx | 155 ++++++++++++++++++ src/components/Send/views/SendRouter.view.tsx | 113 ++----------- src/constants/query.consts.ts | 1 + 4 files changed, 178 insertions(+), 97 deletions(-) create mode 100644 src/components/Send/views/Contacts.view.tsx diff --git a/src/components/Global/EmptyStates/EmptyState.tsx b/src/components/Global/EmptyStates/EmptyState.tsx index 633d5dbd6..0dc47fca1 100644 --- a/src/components/Global/EmptyStates/EmptyState.tsx +++ b/src/components/Global/EmptyStates/EmptyState.tsx @@ -1,19 +1,21 @@ import React from 'react' import Card from '../Card' import { Icon, type IconName } from '../Icons/Icon' +import { twMerge } from 'tailwind-merge' interface EmptyStateProps { icon: IconName title: string | React.ReactNode description?: string cta?: React.ReactNode + containerClassName?: HTMLDivElement['className'] } // EmptyState component - Used for dispalying when there's no data in a certain scneario and we want to inform users with a cta (optional) -export default function EmptyState({ title, description, icon, cta }: EmptyStateProps) { +export default function EmptyState({ title, description, icon, cta, containerClassName }: EmptyStateProps) { return ( -
+
diff --git a/src/components/Send/views/Contacts.view.tsx b/src/components/Send/views/Contacts.view.tsx new file mode 100644 index 000000000..b34e4cbf9 --- /dev/null +++ b/src/components/Send/views/Contacts.view.tsx @@ -0,0 +1,155 @@ +'use client' + +import { useAppDispatch } from '@/redux/hooks' +import { sendFlowActions } from '@/redux/slices/send-flow-slice' +import { useRouter, useSearchParams } from 'next/navigation' +import NavHeader from '@/components/Global/NavHeader' +import { ActionListCard } from '@/components/ActionListCard' +import { useContacts } from '@/hooks/useContacts' +import { useMemo, useState } from 'react' +import AvatarWithBadge from '@/components/Profile/AvatarWithBadge' +import { VerifiedUserLabel } from '@/components/UserHeader' +import { SearchInput } from '@/components/SearchInput' +import PeanutLoading from '@/components/Global/PeanutLoading' +import EmptyState from '@/components/Global/EmptyStates/EmptyState' +import { Button } from '@/components/0_Bruddle' + +export default function ContactsView() { + const router = useRouter() + const dispatch = useAppDispatch() + const searchParams = useSearchParams() + const isSendingByLink = searchParams.get('view') === 'link' || searchParams.get('createLink') === 'true' + const isSendingToContacts = searchParams.get('view') === 'contacts' + const { contacts, isLoading: isFetchingContacts } = useContacts() + const [searchQuery, setSearchQuery] = useState('') + + // client-side search filtering + const filteredContacts = useMemo(() => { + if (!searchQuery.trim()) return contacts + + const query = searchQuery.toLowerCase() + return contacts.filter( + (contact) => + contact.username.toLowerCase().includes(query) || contact.fullName?.toLowerCase().includes(query) + ) + }, [contacts, searchQuery]) + + const redirectToSendByLink = () => { + // reset send flow state when entering link creation flow + dispatch(sendFlowActions.resetSendFlow()) + router.push(`${window.location.pathname}?view=link`) + } + + const handlePrev = () => { + // reset send flow state and navigate deterministically + // when in sub-views (link or contacts), go back to base send page + // otherwise, go to home + dispatch(sendFlowActions.resetSendFlow()) + if (isSendingByLink || isSendingToContacts) { + router.push('/send') + } else { + router.push('/home') + } + } + + const handleLinkCtaClick = () => { + router.push(`${window.location.pathname}?view=link`) + redirectToSendByLink() + } + + // handle user selection from contacts + const handleUserSelect = (username: string) => { + router.push(`/send/${username}`) + } + + if (isFetchingContacts) { + return + } + + return ( +
+ + + {contacts.length > 0 ? ( +
+ {/* search input */} + setSearchQuery(e.target.value)} + onClear={() => setSearchQuery('')} + placeholder="Search contacts..." + /> + + {/* contacts list */} + {filteredContacts.length > 0 ? ( +
+

Your contacts

+
+ {filteredContacts.map((contact, index) => { + const isVerified = contact.bridgeKycStatus === 'approved' + const displayName = contact.showFullName + ? contact.fullName || contact.username + : contact.username + return ( + + } + description={`@${contact.username}`} + leftIcon={} + onClick={() => handleUserSelect(contact.username)} + /> + ) + })} +
+
+ ) : ( + // no search results + + )} +
+ ) : ( + // empty state - no contacts at all +
+ + Send via link + + } + /> +
+ )} +
+ ) +} diff --git a/src/components/Send/views/SendRouter.view.tsx b/src/components/Send/views/SendRouter.view.tsx index 8ccea511e..2bc9a2c65 100644 --- a/src/components/Send/views/SendRouter.view.tsx +++ b/src/components/Send/views/SendRouter.view.tsx @@ -15,11 +15,11 @@ import { ACTION_METHODS, type PaymentMethod } from '@/constants/actionlist.const import Image from 'next/image' import StatusBadge from '@/components/Global/Badges/StatusBadge' import { useGeoFilteredPaymentOptions } from '@/hooks/useGeoFilteredPaymentOptions' -import { useRecentUsers } from '@/hooks/useRecentUsers' +import { useContacts } from '@/hooks/useContacts' import { getInitialsFromName } from '@/utils/general.utils' import { useCallback, useMemo } from 'react' import AvatarWithBadge from '@/components/Profile/AvatarWithBadge' -import { VerifiedUserLabel } from '@/components/UserHeader' +import ContactsView from './Contacts.view' export const SendRouterView = () => { const router = useRouter() @@ -27,25 +27,27 @@ export const SendRouterView = () => { const searchParams = useSearchParams() const isSendingByLink = searchParams.get('view') === 'link' || searchParams.get('createLink') === 'true' const isSendingToContacts = searchParams.get('view') === 'contacts' - const { recentTransactions, isFetchingRecentUsers } = useRecentUsers() + const { contacts, isLoading: isFetchingContacts } = useContacts() - // fallback initials when no recent transactions + // fallback initials when no contacts const fallbackInitials = ['PE', 'AN', 'UT'] - const recentUsersAvatarInitials = useCallback(() => { - // if we have recent transactions, use them (max 3) - if (recentTransactions.length > 0) { - return recentTransactions.slice(0, 3).map((transaction) => { - return getInitialsFromName(transaction.username) + const recentContactsAvatarInitials = useCallback(() => { + // if we have contacts, use them (max 3) + if (contacts.length > 0) { + return contacts.slice(0, 3).map((contact) => { + return getInitialsFromName( + contact.showFullName ? contact.fullName || contact.username : contact.username + ) }) } // fallback to default initials if no data return fallbackInitials - }, [recentTransactions]) + }, [contacts]) - const recentUsersAvatars = useMemo(() => { + const contactsAvatars = useMemo(() => { // show loading skeleton while fetching - if (isFetchingRecentUsers) { + if (isFetchingContacts) { return (
{[0, 1, 2].map((index) => ( @@ -62,7 +64,7 @@ export const SendRouterView = () => { // show avatars (either real data or fallback) return (
- {recentUsersAvatarInitials().map((initial, index) => { + {recentContactsAvatarInitials().map((initial, index) => { return (
@@ -71,7 +73,7 @@ export const SendRouterView = () => { })}
) - }, [isFetchingRecentUsers, recentUsersAvatarInitials]) + }, [isFetchingContacts, recentContactsAvatarInitials]) const redirectToSendByLink = () => { // reset send flow state when entering link creation flow @@ -124,11 +126,6 @@ export const SendRouterView = () => { } } - // handle user selection from contacts - const handleUserSelect = (username: string) => { - router.push(`/send/${username}`) - } - // extend ACTION_METHODS with component-specific identifier icons const extendedActionMethods = useMemo(() => { return ACTION_METHODS.map((method) => { @@ -197,81 +194,7 @@ export const SendRouterView = () => { // contacts view if (isSendingToContacts) { - return ( -
- - - {isFetchingRecentUsers ? ( - // show loading state -
-
Loading contacts...
-
- ) : recentTransactions.length > 0 ? ( - // show contacts list -
-

Recent activity

-
- {recentTransactions.map((user, index) => { - const isVerified = user.bridgeKycStatus === 'approved' - return ( - - } - description={`@${user.username}`} - leftIcon={ - - } - onClick={() => handleUserSelect(user.username)} - /> - ) - })} -
-
- ) : ( - // empty state -
- -
-
-
- -
-
-
Send money with a link
-
No account needed to receive.
-
-
- -
- -
- )} -
- ) + return } return ( @@ -303,7 +226,7 @@ export const SendRouterView = () => { let rightContent switch (option.id) { case 'peanut-contacts': - rightContent = recentUsersAvatars + rightContent = contactsAvatars break case 'mercadopago': rightContent = diff --git a/src/constants/query.consts.ts b/src/constants/query.consts.ts index 72714ea5b..adcfb970c 100644 --- a/src/constants/query.consts.ts +++ b/src/constants/query.consts.ts @@ -1,5 +1,6 @@ export const USER = 'user' export const TRANSACTIONS = 'transactions' +export const CONTACTS = 'contacts' export const CLAIM_LINK = 'claimLink' export const CLAIM_LINK_XCHAIN = 'claimLinkXChain' From b8af2acc270e2eb6b1e3bcbf1d4b09c8da6a9a31 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 14:14:24 -0300 Subject: [PATCH 004/121] fix: search icon z-index --- src/components/SearchInput/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx index 5c7fd3220..e00cae23f 100644 --- a/src/components/SearchInput/index.tsx +++ b/src/components/SearchInput/index.tsx @@ -22,7 +22,7 @@ export const SearchInput = ({ return (
{/* icono lupa */} -
+
From 1d08221639c4be0fbe7b6c9ac8441f0146ac7aa9 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 15:14:59 -0300 Subject: [PATCH 005/121] feat: handle error state for contacts --- src/components/Send/views/Contacts.view.tsx | 29 ++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/components/Send/views/Contacts.view.tsx b/src/components/Send/views/Contacts.view.tsx index b34e4cbf9..f89a0390e 100644 --- a/src/components/Send/views/Contacts.view.tsx +++ b/src/components/Send/views/Contacts.view.tsx @@ -20,7 +20,7 @@ export default function ContactsView() { const searchParams = useSearchParams() const isSendingByLink = searchParams.get('view') === 'link' || searchParams.get('createLink') === 'true' const isSendingToContacts = searchParams.get('view') === 'contacts' - const { contacts, isLoading: isFetchingContacts } = useContacts() + const { contacts, isLoading: isFetchingContacts, error: isError, refetch } = useContacts() const [searchQuery, setSearchQuery] = useState('') // client-side search filtering @@ -66,6 +66,33 @@ export default function ContactsView() { return } + // handle error state before checking for empty contacts + if (!!isError) { + return ( +
+ +
+ refetch()} + className="mt-4" + icon="retry" + iconSize={12} + > + Retry + + } + /> +
+
+ ) + } + return (
From 25ba0f03c3c0d2b7d0f8b3746b4e54eacdb77129 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 15:16:10 -0300 Subject: [PATCH 006/121] fix: disable android native ptr and use pulltorefreshjs --- src/app/(mobile-ui)/layout.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index 2a98ec647..e9e8261bd 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -48,8 +48,16 @@ const Layout = ({ children }: { children: React.ReactNode }) => { useEffect(() => { if (typeof window === 'undefined') return - // Only initialize pull-to-refresh on iOS devices - if (detectedDeviceType !== DeviceType.IOS) return + // enable pull-to-refresh on both iOS and android + if (detectedDeviceType !== DeviceType.IOS && detectedDeviceType !== DeviceType.ANDROID) { + return // only skip on desktop + } + + // disable native overscroll on android to prevent conflicts + if (detectedDeviceType === DeviceType.ANDROID) { + document.documentElement.style.overscrollBehavior = 'none' + document.body.style.overscrollBehavior = 'none' + } PullToRefresh.init({ mainElement: 'body', @@ -68,12 +76,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => { distThreshold: 70, distMax: 120, distReload: 80, + // prevent conflicts with native behavior + resistanceFunction: (t) => Math.min(1, t / 2.5), }) return () => { PullToRefresh.destroyAll() + // clean up overscroll behavior on unmount + if (detectedDeviceType === DeviceType.ANDROID) { + document.documentElement.style.overscrollBehavior = '' + document.body.style.overscrollBehavior = '' + } } - }, []) + }, [detectedDeviceType]) // Allow access to public paths without authentication const isPublicPath = PUBLIC_ROUTES_REGEX.test(pathName) From 9dfc8ae425555532d64483f3adc790f5fd45aa88 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 15:37:05 -0300 Subject: [PATCH 007/121] fix: try display override property --- src/app/(mobile-ui)/layout.tsx | 21 +++------------------ src/app/manifest.ts | 1 + 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index e9e8261bd..2a98ec647 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -48,16 +48,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => { useEffect(() => { if (typeof window === 'undefined') return - // enable pull-to-refresh on both iOS and android - if (detectedDeviceType !== DeviceType.IOS && detectedDeviceType !== DeviceType.ANDROID) { - return // only skip on desktop - } - - // disable native overscroll on android to prevent conflicts - if (detectedDeviceType === DeviceType.ANDROID) { - document.documentElement.style.overscrollBehavior = 'none' - document.body.style.overscrollBehavior = 'none' - } + // Only initialize pull-to-refresh on iOS devices + if (detectedDeviceType !== DeviceType.IOS) return PullToRefresh.init({ mainElement: 'body', @@ -76,19 +68,12 @@ const Layout = ({ children }: { children: React.ReactNode }) => { distThreshold: 70, distMax: 120, distReload: 80, - // prevent conflicts with native behavior - resistanceFunction: (t) => Math.min(1, t / 2.5), }) return () => { PullToRefresh.destroyAll() - // clean up overscroll behavior on unmount - if (detectedDeviceType === DeviceType.ANDROID) { - document.documentElement.style.overscrollBehavior = '' - document.body.style.overscrollBehavior = '' - } } - }, [detectedDeviceType]) + }, []) // Allow access to public paths without authentication const isPublicPath = PUBLIC_ROUTES_REGEX.test(pathName) diff --git a/src/app/manifest.ts b/src/app/manifest.ts index ce759c09f..c5280a9e5 100644 --- a/src/app/manifest.ts +++ b/src/app/manifest.ts @@ -16,6 +16,7 @@ export default function manifest(): MetadataRoute.Manifest { description: 'Butter smooth global money', start_url: '/home', display: 'standalone', + display_override: ['standalone'], background_color: '#ffffff', theme_color: '#000000', icons: [ From 88436e5007c7c09c664f8f8a1c1c60ca0f18250c Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 16:00:43 -0300 Subject: [PATCH 008/121] fix: try css fix --- src/styles/globals.css | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index 0251cc64e..03b80436e 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -3,11 +3,18 @@ @tailwind utilities; @layer base { + /* Force light mode - prevent browser dark mode */ :root { color-scheme: light only; } + html, + body { + /* disable pull-to-refresh on mobile browsers */ + overscroll-behavior-y: contain; + } + body { /* disable text selection */ @apply select-none; @@ -17,6 +24,7 @@ } @layer utilities { + /* remove ios-specific button styling */ button, [type='button'] { @@ -79,7 +87,7 @@ Firefox input[type='number'] { } } -.scroller > span { +.scroller>span { position: absolute; top: 0; animation: slide 10s infinite; @@ -277,10 +285,12 @@ Firefox input[type='number'] { /* Perk animations - Progressive shake intensities */ @keyframes perkShakeWeak { + 0%, 100% { transform: translateX(0) rotate(0deg); } + 10%, 30%, 50%, @@ -288,6 +298,7 @@ Firefox input[type='number'] { 90% { transform: translateX(-4px) rotate(-0.5deg); } + 20%, 40%, 60%, @@ -297,10 +308,12 @@ Firefox input[type='number'] { } @keyframes perkShakeMedium { + 0%, 100% { transform: translateX(0) rotate(0deg); } + 10%, 30%, 50%, @@ -308,6 +321,7 @@ Firefox input[type='number'] { 90% { transform: translateX(-8px) rotate(-1deg); } + 20%, 40%, 60%, @@ -317,10 +331,12 @@ Firefox input[type='number'] { } @keyframes perkShakeStrong { + 0%, 100% { transform: translate(0, 0) rotate(0deg); } + 10%, 30%, 50%, @@ -328,6 +344,7 @@ Firefox input[type='number'] { 90% { transform: translate(-12px, -2px) rotate(-1.5deg); } + 20%, 40%, 60%, @@ -337,10 +354,12 @@ Firefox input[type='number'] { } @keyframes perkShakeIntense { + 0%, 100% { transform: translate(0, 0) rotate(0deg); } + 10%, 30%, 50%, @@ -348,6 +367,7 @@ Firefox input[type='number'] { 90% { transform: translate(-16px, -3px) rotate(-2deg); } + 20%, 40%, 60%, @@ -471,4 +491,4 @@ input::placeholder { .embla__slide { flex: 0 0 100%; min-width: 0; -} +} \ No newline at end of file From f75883465e14404feb335b0114ec07a3c8c46f8b Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 16:46:37 -0300 Subject: [PATCH 009/121] fix: try css overrride fix for android native ptr --- src/app/(mobile-ui)/layout.tsx | 14 ++++----- src/styles/globals.css | 57 ++++++++++++++++++++++++++++------ 2 files changed, 54 insertions(+), 17 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index 2a98ec647..079bdc0cb 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -43,22 +43,22 @@ const Layout = ({ children }: { children: React.ReactNode }) => { setIsReady(true) }, []) - // Pull-to-refresh is only enabled on iOS devices since Android has native pull-to-refresh + // pull-to-refresh enabled on both ios and android with hidden indicator // docs here: https://github.com/BoxFactura/pulltorefresh.js useEffect(() => { if (typeof window === 'undefined') return - // Only initialize pull-to-refresh on iOS devices - if (detectedDeviceType !== DeviceType.IOS) return + // initialize pull-to-refresh on mobile devices (ios and android) + if (detectedDeviceType === DeviceType.WEB) return PullToRefresh.init({ mainElement: 'body', onRefresh: () => { window.location.reload() }, - instructionsPullToRefresh: 'Pull down to refresh', - instructionsReleaseToRefresh: 'Release to refresh', - instructionsRefreshing: 'Refreshing...', + instructionsPullToRefresh: '', + instructionsReleaseToRefresh: '', + instructionsRefreshing: '', shouldPullToRefresh: () => { const el = document.querySelector('body') if (!el) return false @@ -73,7 +73,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => { return () => { PullToRefresh.destroyAll() } - }, []) + }, [detectedDeviceType]) // Allow access to public paths without authentication const isPublicPath = PUBLIC_ROUTES_REGEX.test(pathName) diff --git a/src/styles/globals.css b/src/styles/globals.css index 03b80436e..bc225932a 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -3,7 +3,6 @@ @tailwind utilities; @layer base { - /* Force light mode - prevent browser dark mode */ :root { color-scheme: light only; @@ -11,8 +10,8 @@ html, body { - /* disable pull-to-refresh on mobile browsers */ - overscroll-behavior-y: contain; + /* disable native pull-to-refresh on android - we use custom implementation */ + overscroll-behavior-y: none; } body { @@ -24,7 +23,6 @@ } @layer utilities { - /* remove ios-specific button styling */ button, [type='button'] { @@ -87,7 +85,7 @@ Firefox input[type='number'] { } } -.scroller>span { +.scroller > span { position: absolute; top: 0; animation: slide 10s infinite; @@ -285,7 +283,6 @@ Firefox input[type='number'] { /* Perk animations - Progressive shake intensities */ @keyframes perkShakeWeak { - 0%, 100% { transform: translateX(0) rotate(0deg); @@ -308,7 +305,6 @@ Firefox input[type='number'] { } @keyframes perkShakeMedium { - 0%, 100% { transform: translateX(0) rotate(0deg); @@ -331,7 +327,6 @@ Firefox input[type='number'] { } @keyframes perkShakeStrong { - 0%, 100% { transform: translate(0, 0) rotate(0deg); @@ -354,7 +349,6 @@ Firefox input[type='number'] { } @keyframes perkShakeIntense { - 0%, 100% { transform: translate(0, 0) rotate(0deg); @@ -491,4 +485,47 @@ input::placeholder { .embla__slide { flex: 0 0 100%; min-width: 0; -} \ No newline at end of file +} + +/* pull-to-refresh custom styling - hide the indicator */ +.ptr { + pointer-events: none; + font-size: 0.85em; + font-weight: bold; + top: 0; + height: 0; + transition: + height 0.3s, + min-height 0.3s; + text-align: center; + width: 100%; + overflow: hidden; + display: flex; + align-items: flex-end; + align-content: stretch; +} + +.ptr--pull { + transition: none; +} + +.ptr--release .ptr__pull { + display: none; +} + +.ptr--text, +.ptr--icon, +.ptr__children { + /* hide all text and icons */ + opacity: 0 !important; + display: none !important; +} + +.ptr__pull, +.ptr__release, +.ptr__refresh { + /* hide refresh indicators */ + opacity: 0 !important; + height: 0 !important; + visibility: hidden !important; +} From 5ef58985d349792404ef53bd2915ce8ab8673308 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 17:04:46 -0300 Subject: [PATCH 010/121] fix: try router approach --- src/app/(mobile-ui)/layout.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index 079bdc0cb..78846187e 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -54,7 +54,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => { PullToRefresh.init({ mainElement: 'body', onRefresh: () => { - window.location.reload() + // use router.refresh() instead of window.location.reload() to avoid showing browser's loading bar + router.refresh() }, instructionsPullToRefresh: '', instructionsReleaseToRefresh: '', @@ -73,7 +74,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => { return () => { PullToRefresh.destroyAll() } - }, [detectedDeviceType]) + }, [detectedDeviceType, router]) // Allow access to public paths without authentication const isPublicPath = PUBLIC_ROUTES_REGEX.test(pathName) From 5c386741384173937132d92a389d903624b4c281 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 17:14:56 -0300 Subject: [PATCH 011/121] fix: remove ptr classes --- src/styles/globals.css | 49 ------------------------------------------ 1 file changed, 49 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index bc225932a..661142fe3 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -8,12 +8,6 @@ color-scheme: light only; } - html, - body { - /* disable native pull-to-refresh on android - we use custom implementation */ - overscroll-behavior-y: none; - } - body { /* disable text selection */ @apply select-none; @@ -486,46 +480,3 @@ input::placeholder { flex: 0 0 100%; min-width: 0; } - -/* pull-to-refresh custom styling - hide the indicator */ -.ptr { - pointer-events: none; - font-size: 0.85em; - font-weight: bold; - top: 0; - height: 0; - transition: - height 0.3s, - min-height 0.3s; - text-align: center; - width: 100%; - overflow: hidden; - display: flex; - align-items: flex-end; - align-content: stretch; -} - -.ptr--pull { - transition: none; -} - -.ptr--release .ptr__pull { - display: none; -} - -.ptr--text, -.ptr--icon, -.ptr__children { - /* hide all text and icons */ - opacity: 0 !important; - display: none !important; -} - -.ptr__pull, -.ptr__release, -.ptr__refresh { - /* hide refresh indicators */ - opacity: 0 !important; - height: 0 !important; - visibility: hidden !important; -} From ee4ea21c0eb25ec3bd936e9d345fc6e5365cbe62 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 17:22:09 -0300 Subject: [PATCH 012/121] chore: remove trial n error changes --- src/app/(mobile-ui)/layout.tsx | 13 ++++++------- src/app/manifest.ts | 1 - 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index 78846187e..a0f0853b7 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -48,18 +48,17 @@ const Layout = ({ children }: { children: React.ReactNode }) => { useEffect(() => { if (typeof window === 'undefined') return - // initialize pull-to-refresh on mobile devices (ios and android) - if (detectedDeviceType === DeviceType.WEB) return + // Only initialize pull-to-refresh on iOS devices + if (detectedDeviceType !== DeviceType.IOS) return PullToRefresh.init({ mainElement: 'body', onRefresh: () => { - // use router.refresh() instead of window.location.reload() to avoid showing browser's loading bar router.refresh() }, - instructionsPullToRefresh: '', - instructionsReleaseToRefresh: '', - instructionsRefreshing: '', + instructionsPullToRefresh: 'Pull down to refresh', + instructionsReleaseToRefresh: 'Release to refresh', + instructionsRefreshing: 'Refreshing...', shouldPullToRefresh: () => { const el = document.querySelector('body') if (!el) return false @@ -74,7 +73,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => { return () => { PullToRefresh.destroyAll() } - }, [detectedDeviceType, router]) + }, [router]) // Allow access to public paths without authentication const isPublicPath = PUBLIC_ROUTES_REGEX.test(pathName) diff --git a/src/app/manifest.ts b/src/app/manifest.ts index c5280a9e5..ce759c09f 100644 --- a/src/app/manifest.ts +++ b/src/app/manifest.ts @@ -16,7 +16,6 @@ export default function manifest(): MetadataRoute.Manifest { description: 'Butter smooth global money', start_url: '/home', display: 'standalone', - display_override: ['standalone'], background_color: '#ffffff', theme_color: '#000000', icons: [ From 8a714c4682c826664b10c69e3ec3f77a1e17b060 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 17:23:08 -0300 Subject: [PATCH 013/121] fix: comment --- src/app/(mobile-ui)/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index a0f0853b7..29440f68a 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -43,7 +43,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => { setIsReady(true) }, []) - // pull-to-refresh enabled on both ios and android with hidden indicator + // Pull-to-refresh is only enabled on iOS devices since Android has native pull-to-refresh // docs here: https://github.com/BoxFactura/pulltorefresh.js useEffect(() => { if (typeof window === 'undefined') return From 7b532c0d5b15f45e22bc1739949b6037f2158b70 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 7 Nov 2025 17:31:39 -0300 Subject: [PATCH 014/121] fix: use router to refresh --- .../Global/WalletNavigation/index.tsx | 58 ++++++++++--------- 1 file changed, 31 insertions(+), 27 deletions(-) diff --git a/src/components/Global/WalletNavigation/index.tsx b/src/components/Global/WalletNavigation/index.tsx index b61c63dc0..675173748 100644 --- a/src/components/Global/WalletNavigation/index.tsx +++ b/src/components/Global/WalletNavigation/index.tsx @@ -1,3 +1,4 @@ +'use client' import { PEANUT_LOGO } from '@/assets' import DirectSendQr from '@/components/Global/DirectSendQR' import { Icon, type IconName, Icon as NavIcon } from '@/components/Global/Icons/Icon' @@ -7,7 +8,7 @@ import { useUserStore } from '@/redux/hooks' import classNames from 'classnames' import Image from 'next/image' import Link from 'next/link' -import { usePathname } from 'next/navigation' +import { usePathname, useRouter } from 'next/navigation' type NavPathProps = { name: string @@ -32,32 +33,35 @@ type NavSectionProps = { pathName: string } -const NavSection: React.FC = ({ paths, pathName }) => ( - <> - {paths.map(({ name, href, icon, size }, index) => ( -
- { - if (pathName === href) { - window.location.reload() - } - }} - > - - {name} - - {index === 4 &&
} -
- ))} - -) +const NavSection: React.FC = ({ paths, pathName }) => { + const router = useRouter() + return ( + <> + {paths.map(({ name, href, icon, size }, index) => ( +
+ { + if (pathName === href) { + router.refresh() + } + }} + > + + {name} + + {index === 4 &&
} +
+ ))} + + ) +} type MobileNavProps = { pathName: string From 9fdea550c54befd3553d36f89d4a05985debd18c Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sat, 8 Nov 2025 14:19:00 -0300 Subject: [PATCH 015/121] feat: pagination --- src/components/Send/views/Contacts.view.tsx | 1 - src/hooks/useContacts.ts | 28 ++++++++++++++++----- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/Send/views/Contacts.view.tsx b/src/components/Send/views/Contacts.view.tsx index f89a0390e..9dcc780c4 100644 --- a/src/components/Send/views/Contacts.view.tsx +++ b/src/components/Send/views/Contacts.view.tsx @@ -53,7 +53,6 @@ export default function ContactsView() { } const handleLinkCtaClick = () => { - router.push(`${window.location.pathname}?view=link`) redirectToSendByLink() } diff --git a/src/hooks/useContacts.ts b/src/hooks/useContacts.ts index 720323fcc..b85a879c2 100644 --- a/src/hooks/useContacts.ts +++ b/src/hooks/useContacts.ts @@ -9,7 +9,7 @@ export interface Contact { userId: string username: string fullName: string | null - bridgeKycStatus: string + bridgeKycStatus: string | null showFullName: boolean relationshipTypes: ('inviter' | 'invitee' | 'sent_money' | 'received_money')[] firstInteractionDate: string @@ -19,17 +19,31 @@ export interface Contact { interface ContactsResponse { contacts: Contact[] + total: number + hasMore: boolean +} + +interface UseContactsOptions { + limit?: number + offset?: number } /** - * hook to fetch all contacts for the current user - * includes inviter, invitees, and all transaction counterparties + * hook to fetch all contacts for the current user with pagination + * includes: inviter, invitees, and all transaction counterparties (sent/received money, request pots) */ -export function useContacts() { +export function useContacts(options: UseContactsOptions = {}) { + const { limit = 100, offset = 0 } = options + const { data, isLoading, error, refetch } = useQuery({ - queryKey: [CONTACTS], + queryKey: [CONTACTS, limit, offset], queryFn: async (): Promise => { - const response = await fetchWithSentry(`${PEANUT_API_URL}/users/contacts`, { + const queryParams = new URLSearchParams({ + limit: limit.toString(), + offset: offset.toString(), + }) + + const response = await fetchWithSentry(`${PEANUT_API_URL}/users/contacts?${queryParams}`, { method: 'GET', headers: { 'Content-Type': 'application/json', @@ -48,6 +62,8 @@ export function useContacts() { return { contacts: data?.contacts || [], + total: data?.total || 0, + hasMore: data?.hasMore || false, isLoading, error, refetch, From 86c91f6e3813014b3c146a0398f3f4f4d8f2eab2 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sat, 8 Nov 2025 14:30:36 -0300 Subject: [PATCH 016/121] fix: try device type fix --- src/app/(mobile-ui)/layout.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index 29440f68a..c6a2914b1 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -48,8 +48,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => { useEffect(() => { if (typeof window === 'undefined') return - // Only initialize pull-to-refresh on iOS devices - if (detectedDeviceType !== DeviceType.IOS) return + // initialize pull-to-refresh on mobile devices (ios and android) + if (detectedDeviceType === DeviceType.WEB) return PullToRefresh.init({ mainElement: 'body', @@ -73,7 +73,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => { return () => { PullToRefresh.destroyAll() } - }, [router]) + }, [detectedDeviceType, router]) // Allow access to public paths without authentication const isPublicPath = PUBLIC_ROUTES_REGEX.test(pathName) From 056bb911f55bd3512753f63a3413c8071899c26a Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sat, 8 Nov 2025 14:42:39 -0300 Subject: [PATCH 017/121] fix: try css fix --- src/app/manifest.ts | 1 + src/styles/globals.css | 17 +++++++++++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/app/manifest.ts b/src/app/manifest.ts index ce759c09f..c5280a9e5 100644 --- a/src/app/manifest.ts +++ b/src/app/manifest.ts @@ -16,6 +16,7 @@ export default function manifest(): MetadataRoute.Manifest { description: 'Butter smooth global money', start_url: '/home', display: 'standalone', + display_override: ['standalone'], background_color: '#ffffff', theme_color: '#000000', icons: [ diff --git a/src/styles/globals.css b/src/styles/globals.css index 661142fe3..848e48752 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -3,11 +3,19 @@ @tailwind utilities; @layer base { + /* Force light mode - prevent browser dark mode */ :root { color-scheme: light only; } + html, + body { + /* disable native pull-to-refresh on mobile devices - we use custom implementation */ + overscroll-behavior-y: none; + } + + body { /* disable text selection */ @apply select-none; @@ -17,6 +25,7 @@ } @layer utilities { + /* remove ios-specific button styling */ button, [type='button'] { @@ -79,7 +88,7 @@ Firefox input[type='number'] { } } -.scroller > span { +.scroller>span { position: absolute; top: 0; animation: slide 10s infinite; @@ -277,6 +286,7 @@ Firefox input[type='number'] { /* Perk animations - Progressive shake intensities */ @keyframes perkShakeWeak { + 0%, 100% { transform: translateX(0) rotate(0deg); @@ -299,6 +309,7 @@ Firefox input[type='number'] { } @keyframes perkShakeMedium { + 0%, 100% { transform: translateX(0) rotate(0deg); @@ -321,6 +332,7 @@ Firefox input[type='number'] { } @keyframes perkShakeStrong { + 0%, 100% { transform: translate(0, 0) rotate(0deg); @@ -343,6 +355,7 @@ Firefox input[type='number'] { } @keyframes perkShakeIntense { + 0%, 100% { transform: translate(0, 0) rotate(0deg); @@ -479,4 +492,4 @@ input::placeholder { .embla__slide { flex: 0 0 100%; min-width: 0; -} +} \ No newline at end of file From 6822e4cc12c87e77afa3debfa7da7ca6d9b5756b Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sat, 8 Nov 2025 14:56:06 -0300 Subject: [PATCH 018/121] fix: only ptr ios --- src/app/(mobile-ui)/layout.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index c6a2914b1..29440f68a 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -48,8 +48,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => { useEffect(() => { if (typeof window === 'undefined') return - // initialize pull-to-refresh on mobile devices (ios and android) - if (detectedDeviceType === DeviceType.WEB) return + // Only initialize pull-to-refresh on iOS devices + if (detectedDeviceType !== DeviceType.IOS) return PullToRefresh.init({ mainElement: 'body', @@ -73,7 +73,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => { return () => { PullToRefresh.destroyAll() } - }, [detectedDeviceType, router]) + }, [router]) // Allow access to public paths without authentication const isPublicPath = PUBLIC_ROUTES_REGEX.test(pathName) From f48125dfc90fc25494dfd75404e8888d50327e0f Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sat, 8 Nov 2025 16:22:05 -0300 Subject: [PATCH 019/121] fix: set default currency in input to local for manteca countries --- src/app/(mobile-ui)/withdraw/manteca/page.tsx | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/src/app/(mobile-ui)/withdraw/manteca/page.tsx b/src/app/(mobile-ui)/withdraw/manteca/page.tsx index ac78f33d5..5a5ccc225 100644 --- a/src/app/(mobile-ui)/withdraw/manteca/page.tsx +++ b/src/app/(mobile-ui)/withdraw/manteca/page.tsx @@ -1,7 +1,7 @@ 'use client' import { useWallet } from '@/hooks/wallet/useWallet' -import { useState, useMemo, useContext, useEffect, useCallback, useRef, useId } from 'react' +import { useState, useMemo, useContext, useEffect, useCallback, useId } from 'react' import { useRouter, useSearchParams } from 'next/navigation' import { Button } from '@/components/0_Bruddle/Button' import { Card } from '@/components/0_Bruddle/Card' @@ -19,7 +19,6 @@ import { formatAmount, formatNumberForDisplay } from '@/utils' import { validateCbuCvuAlias, validatePixKey, normalizePixPhoneNumber, isPixPhoneNumber } from '@/utils/withdraw.utils' import ValidatedInput from '@/components/Global/ValidatedInput' import TokenAmountInput from '@/components/Global/TokenAmountInput' -import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants' import { formatUnits, parseUnits } from 'viem' import type { TransactionReceipt, Hash } from 'viem' import { PaymentInfoRow } from '@/components/Payment/PaymentInfoRow' @@ -34,6 +33,7 @@ import { type MantecaBankCode, MANTECA_DEPOSIT_ADDRESS, TRANSACTIONS, + PEANUT_WALLET_TOKEN_DECIMALS, } from '@/constants' import Select from '@/components/Global/Select' import { SoundPlayer } from '@/components/Global/SoundPlayer' @@ -75,7 +75,7 @@ export default function MantecaWithdrawFlow() { const queryClient = useQueryClient() const { isUserBridgeKycApproved } = useKycStatus() const { hasPendingTransactions } = usePendingTransactions() - const swapCurrency = searchParams.get('swap-currency') ?? 'false' + const swapCurrency = searchParams.get('swap-currency') // Get method and country from URL parameters const selectedMethodType = searchParams.get('method') // mercadopago, pix, bank-transfer, etc. const countryFromUrl = searchParams.get('country') // argentina, brazil, etc. @@ -88,6 +88,10 @@ export default function MantecaWithdrawFlow() { return countryData.find((country) => country.type === 'country' && country.path === countryPath) }, [countryPath]) + const isMantecaCountry = useMemo(() => { + return selectedCountry?.id && selectedCountry.id in MANTECA_COUNTRIES_CONFIG + }, [selectedCountry]) + const countryConfig = useMemo(() => { if (!selectedCountry) return undefined return MANTECA_COUNTRIES_CONFIG[selectedCountry.id] @@ -100,6 +104,25 @@ export default function MantecaWithdrawFlow() { isLoading: isCurrencyLoading, } = useCurrency(selectedCountry?.currency!) + // determine if initial input should be in usd or local currency + // for manteca countries, default to local currency unless explicitly overridden + const isInitialInputUsd = useMemo(() => { + // if swap-currency param is explicitly set to 'true' (user toggled to local currency) + // then show local currency first + if (swapCurrency === 'true') { + return false + } + + // if it's a manteca country, default to local currency (not usd) + // ignore swap-currency=false for manteca countries to ensure local currency default + if (isMantecaCountry) { + return false + } + + // otherwise default to usd (for non-manteca countries) + return true + }, [swapCurrency, isMantecaCountry]) + // Initialize KYC flow hook const { isMantecaKycRequired } = useMantecaKycFlow({ country: selectedCountry }) @@ -431,7 +454,7 @@ export default function MantecaWithdrawFlow() { walletBalance={ balance ? formatAmount(formatUnits(balance, PEANUT_WALLET_TOKEN_DECIMALS)) : undefined } - isInitialInputUsd={swapCurrency !== 'true'} + isInitialInputUsd={isInitialInputUsd} /> {/* icono lupa */} -
+
From ec548d9c125530d8510b5c3b795cae8d2707b146 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sun, 9 Nov 2025 23:04:20 -0300 Subject: [PATCH 021/121] feat: infinite scroll hook --- src/app/(mobile-ui)/history/page.tsx | 34 ++++--------- src/components/Send/views/Contacts.view.tsx | 28 ++++++++++- src/hooks/useContacts.ts | 30 +++++++---- src/hooks/useInfiniteScroll.ts | 56 +++++++++++++++++++++ 4 files changed, 111 insertions(+), 37 deletions(-) create mode 100644 src/hooks/useInfiniteScroll.ts diff --git a/src/app/(mobile-ui)/history/page.tsx b/src/app/(mobile-ui)/history/page.tsx index dd67ea4c0..c27f6821d 100644 --- a/src/app/(mobile-ui)/history/page.tsx +++ b/src/app/(mobile-ui)/history/page.tsx @@ -14,9 +14,10 @@ import { formatGroupHeaderDate, getDateGroup, getDateGroupKey } from '@/utils/da import * as Sentry from '@sentry/nextjs' import { isKycStatusItem } from '@/hooks/useBridgeKycFlow' import { BadgeStatusItem, isBadgeHistoryItem } from '@/components/Badges/BadgeStatusItem' -import React, { useEffect, useMemo, useRef } from 'react' +import React, { useMemo } from 'react' import { useQueryClient, type InfiniteData } from '@tanstack/react-query' import { useWebSocket } from '@/hooks/useWebSocket' +import { useInfiniteScroll } from '@/hooks/useInfiniteScroll' import { TRANSACTIONS } from '@/constants/query.consts' import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants' import type { HistoryResponse } from '@/hooks/useTransactionHistory' @@ -28,7 +29,6 @@ import { formatUnits } from 'viem' * displays the user's transaction history with infinite scrolling and date grouping. */ const HistoryPage = () => { - const loaderRef = useRef(null) const { user } = useUserStore() const queryClient = useQueryClient() @@ -45,6 +45,13 @@ const HistoryPage = () => { limit: 20, }) + // infinite scroll hook + const { loaderRef } = useInfiniteScroll({ + hasNextPage, + isFetchingNextPage, + fetchNextPage, + }) + // Real-time updates via WebSocket useWebSocket({ username: user?.user.username ?? undefined, @@ -127,29 +134,6 @@ const HistoryPage = () => { }, }) - useEffect(() => { - const observer = new IntersectionObserver( - (entries) => { - const target = entries[0] - if (target.isIntersecting && hasNextPage && !isFetchingNextPage) { - fetchNextPage() - } - }, - { - threshold: 0.1, - } - ) - const currentLoaderRef = loaderRef.current - if (currentLoaderRef) { - observer.observe(currentLoaderRef) - } - return () => { - if (currentLoaderRef) { - observer.unobserve(currentLoaderRef) - } - } - }, [hasNextPage, isFetchingNextPage, fetchNextPage]) - const allEntries = useMemo(() => historyData?.pages.flatMap((page) => page.entries) ?? [], [historyData]) const combinedAndSortedEntries = useMemo(() => { diff --git a/src/components/Send/views/Contacts.view.tsx b/src/components/Send/views/Contacts.view.tsx index 9dcc780c4..a1b0a2a45 100644 --- a/src/components/Send/views/Contacts.view.tsx +++ b/src/components/Send/views/Contacts.view.tsx @@ -6,6 +6,7 @@ import { useRouter, useSearchParams } from 'next/navigation' import NavHeader from '@/components/Global/NavHeader' import { ActionListCard } from '@/components/ActionListCard' import { useContacts } from '@/hooks/useContacts' +import { useInfiniteScroll } from '@/hooks/useInfiniteScroll' import { useMemo, useState } from 'react' import AvatarWithBadge from '@/components/Profile/AvatarWithBadge' import { VerifiedUserLabel } from '@/components/UserHeader' @@ -20,9 +21,25 @@ export default function ContactsView() { const searchParams = useSearchParams() const isSendingByLink = searchParams.get('view') === 'link' || searchParams.get('createLink') === 'true' const isSendingToContacts = searchParams.get('view') === 'contacts' - const { contacts, isLoading: isFetchingContacts, error: isError, refetch } = useContacts() + const { + contacts, + isLoading: isFetchingContacts, + error: isError, + fetchNextPage, + hasNextPage, + isFetchingNextPage, + refetch, + } = useContacts({ limit: 50 }) const [searchQuery, setSearchQuery] = useState('') + // infinite scroll hook - disabled when searching (search is client-side) + const { loaderRef } = useInfiniteScroll({ + hasNextPage, + isFetchingNextPage, + fetchNextPage, + enabled: !searchQuery, // disable when user is searching + }) + // client-side search filtering const filteredContacts = useMemo(() => { if (!searchQuery.trim()) return contacts @@ -145,6 +162,15 @@ export default function ContactsView() { ) })}
+ + {/* infinite scroll loader - only active when not searching */} + {!searchQuery && ( +
+ {isFetchingNextPage && ( +
Loading more...
+ )} +
+ )}
) : ( // no search results diff --git a/src/hooks/useContacts.ts b/src/hooks/useContacts.ts index b85a879c2..8dc7c7d72 100644 --- a/src/hooks/useContacts.ts +++ b/src/hooks/useContacts.ts @@ -1,5 +1,5 @@ 'use client' -import { useQuery } from '@tanstack/react-query' +import { useInfiniteQuery } from '@tanstack/react-query' import Cookies from 'js-cookie' import { PEANUT_API_URL } from '@/constants' import { CONTACTS } from '@/constants/query.consts' @@ -25,22 +25,21 @@ interface ContactsResponse { interface UseContactsOptions { limit?: number - offset?: number } /** - * hook to fetch all contacts for the current user with pagination + * hook to fetch all contacts for the current user with infinite scroll * includes: inviter, invitees, and all transaction counterparties (sent/received money, request pots) */ export function useContacts(options: UseContactsOptions = {}) { - const { limit = 100, offset = 0 } = options + const { limit = 50 } = options - const { data, isLoading, error, refetch } = useQuery({ - queryKey: [CONTACTS, limit, offset], - queryFn: async (): Promise => { + const { data, isLoading, error, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } = useInfiniteQuery({ + queryKey: [CONTACTS, limit], + queryFn: async ({ pageParam = 0 }): Promise => { const queryParams = new URLSearchParams({ limit: limit.toString(), - offset: offset.toString(), + offset: (pageParam * limit).toString(), }) const response = await fetchWithSentry(`${PEANUT_API_URL}/users/contacts?${queryParams}`, { @@ -57,15 +56,24 @@ export function useContacts(options: UseContactsOptions = {}) { return response.json() }, + getNextPageParam: (lastPage, allPages) => { + // if hasMore is true, return next page number + return lastPage.hasMore ? allPages.length : undefined + }, + initialPageParam: 0, staleTime: 5 * 60 * 1000, // 5 minutes }) + // flatten all pages into single contacts array + const allContacts = data?.pages.flatMap((page) => page.contacts) || [] + return { - contacts: data?.contacts || [], - total: data?.total || 0, - hasMore: data?.hasMore || false, + contacts: allContacts, isLoading, error, + fetchNextPage, + hasNextPage, + isFetchingNextPage, refetch, } } diff --git a/src/hooks/useInfiniteScroll.ts b/src/hooks/useInfiniteScroll.ts new file mode 100644 index 000000000..6c12f9570 --- /dev/null +++ b/src/hooks/useInfiniteScroll.ts @@ -0,0 +1,56 @@ +'use client' + +import { useEffect, useRef } from 'react' + +interface UseInfiniteScrollOptions { + hasNextPage: boolean + isFetchingNextPage: boolean + fetchNextPage: () => void + enabled?: boolean // optional flag to disable infinite scroll (e.g., when searching) + threshold?: number // intersection observer threshold +} + +/** + * custom hook for viewport-based infinite scroll using intersection observer + * abstracts the common pattern used across history, contacts, etc. + */ +export function useInfiniteScroll({ + hasNextPage, + isFetchingNextPage, + fetchNextPage, + enabled = true, + threshold = 0.1, +}: UseInfiniteScrollOptions) { + const loaderRef = useRef(null) + + useEffect(() => { + // skip if disabled + if (!enabled) return + + const observer = new IntersectionObserver( + (entries) => { + const target = entries[0] + // trigger fetchNextPage when loader comes into view + if (target.isIntersecting && hasNextPage && !isFetchingNextPage) { + fetchNextPage() + } + }, + { + threshold, + } + ) + + const currentLoaderRef = loaderRef.current + if (currentLoaderRef) { + observer.observe(currentLoaderRef) + } + + return () => { + if (currentLoaderRef) { + observer.unobserve(currentLoaderRef) + } + } + }, [hasNextPage, isFetchingNextPage, fetchNextPage, enabled, threshold]) + + return { loaderRef } +} From 3e6858cf56f7017ad90e28ba7c75c2efae02589d Mon Sep 17 00:00:00 2001 From: Kushagra Sarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 10 Nov 2025 07:40:53 +0530 Subject: [PATCH 022/121] Update src/components/Send/views/Contacts.view.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Kushagra Sarathe <76868364+kushagrasarathe@users.noreply.github.com> --- src/components/Send/views/Contacts.view.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Send/views/Contacts.view.tsx b/src/components/Send/views/Contacts.view.tsx index a1b0a2a45..0fd722b1f 100644 --- a/src/components/Send/views/Contacts.view.tsx +++ b/src/components/Send/views/Contacts.view.tsx @@ -44,11 +44,11 @@ export default function ContactsView() { const filteredContacts = useMemo(() => { if (!searchQuery.trim()) return contacts - const query = searchQuery.toLowerCase() - return contacts.filter( - (contact) => - contact.username.toLowerCase().includes(query) || contact.fullName?.toLowerCase().includes(query) - ) + const query = searchQuery.trim().toLowerCase() + return contacts.filter((contact) => { + const fullName = contact.fullName?.toLowerCase() ?? '' + return contact.username.toLowerCase().includes(query) || fullName.includes(query) + }) }, [contacts, searchQuery]) const redirectToSendByLink = () => { From 9dd5a91e16c09a55128cbc6b5429d0c55b3de2fc Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 10 Nov 2025 12:59:03 -0300 Subject: [PATCH 023/121] fix: review comment --- src/components/Send/views/SendRouter.view.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Send/views/SendRouter.view.tsx b/src/components/Send/views/SendRouter.view.tsx index 2bc9a2c65..c24f83ec4 100644 --- a/src/components/Send/views/SendRouter.view.tsx +++ b/src/components/Send/views/SendRouter.view.tsx @@ -27,15 +27,16 @@ export const SendRouterView = () => { const searchParams = useSearchParams() const isSendingByLink = searchParams.get('view') === 'link' || searchParams.get('createLink') === 'true' const isSendingToContacts = searchParams.get('view') === 'contacts' - const { contacts, isLoading: isFetchingContacts } = useContacts() + // only fetch 3 contacts for avatar display + const { contacts, isLoading: isFetchingContacts } = useContacts({ limit: 3 }) // fallback initials when no contacts const fallbackInitials = ['PE', 'AN', 'UT'] const recentContactsAvatarInitials = useCallback(() => { - // if we have contacts, use them (max 3) + // if we have contacts, use them (already limited to 3 by API) if (contacts.length > 0) { - return contacts.slice(0, 3).map((contact) => { + return contacts.map((contact) => { return getInitialsFromName( contact.showFullName ? contact.fullName || contact.username : contact.username ) From e5f5b42b7dabb8b1d0879610270bff2a87186c08 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 10 Nov 2025 13:51:22 -0300 Subject: [PATCH 024/121] fix: use server action and clean types --- src/app/actions/users.ts | 35 ++++++++++++++++++++++++++++ src/hooks/useContacts.ts | 45 ++++++++++-------------------------- src/interfaces/interfaces.ts | 35 ++++++++++++++-------------- 3 files changed, 65 insertions(+), 50 deletions(-) diff --git a/src/app/actions/users.ts b/src/app/actions/users.ts index 01254e54d..3c03b5a9a 100644 --- a/src/app/actions/users.ts +++ b/src/app/actions/users.ts @@ -6,6 +6,7 @@ import { fetchWithSentry } from '@/utils' import { cookies } from 'next/headers' import { type AddBankAccountPayload, BridgeEndorsementType, type InitiateKycResponse } from './types/users.types' import { type User } from '@/interfaces' +import { type ContactsResponse } from '@/interfaces' const API_KEY = process.env.PEANUT_API_KEY! @@ -163,3 +164,37 @@ export async function trackDaimoDepositTransactionHash({ throw new Error(e.message || e.toString() || 'An unexpected error occurred') } } + +export async function getContacts(params: { + limit: number + offset: number +}): Promise<{ data?: ContactsResponse; error?: string }> { + const cookieStore = cookies() + const jwtToken = (await cookieStore).get('jwt-token')?.value + + try { + const queryParams = new URLSearchParams({ + limit: params.limit.toString(), + offset: params.offset.toString(), + }) + + const response = await fetchWithSentry(`${PEANUT_API_URL}/users/contacts?${queryParams}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'api-key': API_KEY, + Authorization: `Bearer ${jwtToken}`, + }, + }) + + if (!response.ok) { + const errorJson = await response.json() + return { error: errorJson.message || errorJson.error || 'Failed to fetch contacts' } + } + + const responseJson: ContactsResponse = await response.json() + return { data: responseJson } + } catch (e: unknown) { + return { error: e instanceof Error ? e.message : 'An unexpected error occurred' } + } +} diff --git a/src/hooks/useContacts.ts b/src/hooks/useContacts.ts index 8dc7c7d72..84ee7074a 100644 --- a/src/hooks/useContacts.ts +++ b/src/hooks/useContacts.ts @@ -1,27 +1,10 @@ 'use client' import { useInfiniteQuery } from '@tanstack/react-query' -import Cookies from 'js-cookie' -import { PEANUT_API_URL } from '@/constants' import { CONTACTS } from '@/constants/query.consts' -import { fetchWithSentry } from '@/utils' +import { getContacts } from '@/app/actions/users' +import { type Contact, type ContactsResponse } from '@/interfaces' -export interface Contact { - userId: string - username: string - fullName: string | null - bridgeKycStatus: string | null - showFullName: boolean - relationshipTypes: ('inviter' | 'invitee' | 'sent_money' | 'received_money')[] - firstInteractionDate: string - lastInteractionDate: string - transactionCount: number -} - -interface ContactsResponse { - contacts: Contact[] - total: number - hasMore: boolean -} +export type { Contact } interface UseContactsOptions { limit?: number @@ -37,24 +20,20 @@ export function useContacts(options: UseContactsOptions = {}) { const { data, isLoading, error, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } = useInfiniteQuery({ queryKey: [CONTACTS, limit], queryFn: async ({ pageParam = 0 }): Promise => { - const queryParams = new URLSearchParams({ - limit: limit.toString(), - offset: (pageParam * limit).toString(), + const result = await getContacts({ + limit, + offset: pageParam * limit, }) - const response = await fetchWithSentry(`${PEANUT_API_URL}/users/contacts?${queryParams}`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${Cookies.get('jwt-token')}`, - }, - }) + if (result.error) { + throw new Error(result.error) + } - if (!response.ok) { - throw new Error(`Failed to fetch contacts: ${response.statusText}`) + if (!result.data) { + throw new Error('No data returned from server') } - return response.json() + return result.data }, getNextPageParam: (lastPage, allPages) => { // if hasMore is true, return next page number diff --git a/src/interfaces/interfaces.ts b/src/interfaces/interfaces.ts index bab25903e..890ce4037 100644 --- a/src/interfaces/interfaces.ts +++ b/src/interfaces/interfaces.ts @@ -330,25 +330,26 @@ export interface IUserProfile { invitedBy: string | null // Username of the person who invited this user } -interface Contact { - user_id: string - contact_id: string - peanut_account_id: string | null - account_identifier: string - account_type: string - nickname: string | null - ens_name: string | null - created_at: string - updated_at: string - n_interactions: number - usd_volume_transacted: string - last_interacted_with: string | null - username: string | null - profile_picture: string | null -} - export type JSONValue = string | number | boolean | null | JSONValue[] | { [key: string]: JSONValue } export type JSONObject = { [key: string]: JSONValue } + +export interface Contact { + userId: string + username: string + fullName: string | null + bridgeKycStatus: string | null + showFullName: boolean + relationshipTypes: ('inviter' | 'invitee' | 'sent_money' | 'received_money')[] + firstInteractionDate: string + lastInteractionDate: string + transactionCount: number +} + +export interface ContactsResponse { + contacts: Contact[] + total: number + hasMore: boolean +} From b3526a73a8cbaf4e1c976eeedb36338bbddf1df6 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 10 Nov 2025 13:58:11 -0300 Subject: [PATCH 025/121] fix: add jwt check --- src/app/actions/users.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/actions/users.ts b/src/app/actions/users.ts index 3c03b5a9a..8c6180bc9 100644 --- a/src/app/actions/users.ts +++ b/src/app/actions/users.ts @@ -172,6 +172,10 @@ export async function getContacts(params: { const cookieStore = cookies() const jwtToken = (await cookieStore).get('jwt-token')?.value + if (!jwtToken) { + throw new Error('Not authenticated') + } + try { const queryParams = new URLSearchParams({ limit: params.limit.toString(), From 21ddb4dbf76e95adfb12c5dc789f54aae920e0d8 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 10 Nov 2025 14:45:18 -0300 Subject: [PATCH 026/121] fix: enable ptr on setup page --- src/app/(mobile-ui)/layout.tsx | 46 ++++++++++------------------------ src/app/(setup)/layout.tsx | 3 +++ src/hooks/usePullToRefresh.ts | 46 ++++++++++++++++++++++++++++++++++ src/styles/globals.css | 10 ++------ 4 files changed, 64 insertions(+), 41 deletions(-) create mode 100644 src/hooks/usePullToRefresh.ts diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index 29440f68a..f89fdc7f6 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -9,7 +9,6 @@ import { useAuth } from '@/context/authContext' import { hasValidJwtToken } from '@/utils/auth' import classNames from 'classnames' import { usePathname } from 'next/navigation' -import PullToRefresh from 'pulltorefreshjs' import { useEffect, useState } from 'react' import { twMerge } from 'tailwind-merge' import '../../styles/globals.css' @@ -17,10 +16,11 @@ import SupportDrawer from '@/components/Global/SupportDrawer' import JoinWaitlistPage from '@/components/Invites/JoinWaitlistPage' import { useRouter } from 'next/navigation' import { Banner } from '@/components/Global/Banner' -import { DeviceType, useDeviceType } from '@/hooks/useGetDeviceType' +import { useDeviceType } from '@/hooks/useGetDeviceType' import { useSetupStore } from '@/redux/hooks' import ForceIOSPWAInstall from '@/components/ForceIOSPWAInstall' import { PUBLIC_ROUTES_REGEX } from '@/constants/routes' +import { usePullToRefresh } from '@/hooks/usePullToRefresh' const Layout = ({ children }: { children: React.ReactNode }) => { const pathName = usePathname() @@ -43,37 +43,17 @@ const Layout = ({ children }: { children: React.ReactNode }) => { setIsReady(true) }, []) - // Pull-to-refresh is only enabled on iOS devices since Android has native pull-to-refresh - // docs here: https://github.com/BoxFactura/pulltorefresh.js - useEffect(() => { - if (typeof window === 'undefined') return - - // Only initialize pull-to-refresh on iOS devices - if (detectedDeviceType !== DeviceType.IOS) return - - PullToRefresh.init({ - mainElement: 'body', - onRefresh: () => { - router.refresh() - }, - instructionsPullToRefresh: 'Pull down to refresh', - instructionsReleaseToRefresh: 'Release to refresh', - instructionsRefreshing: 'Refreshing...', - shouldPullToRefresh: () => { - const el = document.querySelector('body') - if (!el) return false - - return el.scrollTop === 0 && window.scrollY === 0 - }, - distThreshold: 70, - distMax: 120, - distReload: 80, - }) - - return () => { - PullToRefresh.destroyAll() - } - }, [router]) + // enable pull-to-refresh for both ios and android + usePullToRefresh({ + shouldPullToRefresh: () => { + // check if the scrollable content container is at the top + const scrollableContent = document.querySelector('#scrollable-content') + if (!scrollableContent) return false + + // only allow pull-to-refresh when the scrollable container is at the very top + return scrollableContent.scrollTop === 0 + }, + }) // Allow access to public paths without authentication const isPublicPath = PUBLIC_ROUTES_REGEX.test(pathName) diff --git a/src/app/(setup)/layout.tsx b/src/app/(setup)/layout.tsx index 477dd3c52..577f5981f 100644 --- a/src/app/(setup)/layout.tsx +++ b/src/app/(setup)/layout.tsx @@ -9,6 +9,7 @@ import '../../styles/globals.css' import PeanutLoading from '@/components/Global/PeanutLoading' import { Banner } from '@/components/Global/Banner' import { DeviceType, useDeviceType } from '@/hooks/useGetDeviceType' +import { usePullToRefresh } from '@/hooks/usePullToRefresh' function SetupLayoutContent({ children }: { children?: React.ReactNode }) { const dispatch = useAppDispatch() @@ -33,6 +34,8 @@ function SetupLayoutContent({ children }: { children?: React.ReactNode }) { } }, [isPWA, deviceType]) + usePullToRefresh() + return ( <> diff --git a/src/hooks/usePullToRefresh.ts b/src/hooks/usePullToRefresh.ts new file mode 100644 index 000000000..3ac2323fb --- /dev/null +++ b/src/hooks/usePullToRefresh.ts @@ -0,0 +1,46 @@ +import { useRouter } from 'next/navigation' +import { useEffect } from 'react' +import PullToRefresh from 'pulltorefreshjs' + +interface UsePullToRefreshOptions { + // custom function to determine if pull-to-refresh should be enabled + // defaults to checking if window is at the top + shouldPullToRefresh?: () => boolean + // whether to enable pull-to-refresh (defaults to true) + enabled?: boolean +} + +/** + * hook to enable pull-to-refresh functionality on mobile devices + * native pull-to-refresh is disabled via css (overscroll-behavior-y: none in globals.css) + * this hook uses pulltorefreshjs library for consistent behavior across ios and android + */ +export const usePullToRefresh = (options: UsePullToRefreshOptions = {}) => { + const router = useRouter() + const { shouldPullToRefresh, enabled = true } = options + + useEffect(() => { + if (typeof window === 'undefined' || !enabled) return + + // default behavior: allow pull-to-refresh when window is at the top + const defaultShouldPullToRefresh = () => window.scrollY === 0 + + PullToRefresh.init({ + mainElement: 'body', + onRefresh: () => { + router.refresh() + }, + instructionsPullToRefresh: 'Pull down to refresh', + instructionsReleaseToRefresh: 'Release to refresh', + instructionsRefreshing: 'Refreshing...', + shouldPullToRefresh: shouldPullToRefresh || defaultShouldPullToRefresh, + distThreshold: 70, + distMax: 120, + distReload: 80, + }) + + return () => { + PullToRefresh.destroyAll() + } + }, [router, shouldPullToRefresh, enabled]) +} diff --git a/src/styles/globals.css b/src/styles/globals.css index 3839efb0a..a431af22e 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -3,7 +3,6 @@ @tailwind utilities; @layer base { - /* Nudge browser to prefer light mode for native controls (scrollbars, inputs, etc) */ :root { color-scheme: light; @@ -24,7 +23,6 @@ } @layer utilities { - /* remove ios-specific button styling */ button, [type='button'] { @@ -87,7 +85,7 @@ Firefox input[type='number'] { } } -.scroller>span { +.scroller > span { position: absolute; top: 0; animation: slide 10s infinite; @@ -285,7 +283,6 @@ Firefox input[type='number'] { /* Perk animations - Progressive shake intensities */ @keyframes perkShakeWeak { - 0%, 100% { transform: translateX(0) rotate(0deg); @@ -308,7 +305,6 @@ Firefox input[type='number'] { } @keyframes perkShakeMedium { - 0%, 100% { transform: translateX(0) rotate(0deg); @@ -331,7 +327,6 @@ Firefox input[type='number'] { } @keyframes perkShakeStrong { - 0%, 100% { transform: translate(0, 0) rotate(0deg); @@ -354,7 +349,6 @@ Firefox input[type='number'] { } @keyframes perkShakeIntense { - 0%, 100% { transform: translate(0, 0) rotate(0deg); @@ -491,4 +485,4 @@ input::placeholder { .embla__slide { flex: 0 0 100%; min-width: 0; -} \ No newline at end of file +} From 2aa91051093036f58b2835039e2778022cbba89d Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 10 Nov 2025 15:59:49 -0300 Subject: [PATCH 027/121] improve: memoize shouldPullToRefresh method --- src/app/(mobile-ui)/layout.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index f89fdc7f6..9b39ce9fa 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -9,7 +9,7 @@ import { useAuth } from '@/context/authContext' import { hasValidJwtToken } from '@/utils/auth' import classNames from 'classnames' import { usePathname } from 'next/navigation' -import { useEffect, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' import { twMerge } from 'tailwind-merge' import '../../styles/globals.css' import SupportDrawer from '@/components/Global/SupportDrawer' @@ -43,17 +43,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => { setIsReady(true) }, []) + // memoizing shouldPullToRefresh callback to prevent re-initialization on every render + // @dev: note this fixes the issue where scrolling scolling a long list would trigger pull-to-refresh + const shouldPullToRefresh = useCallback(() => { + // check if the scrollable content container is at the top + const scrollableContent = document.querySelector('#scrollable-content') + if (!scrollableContent) return false + + // only allow pull-to-refresh when the scrollable container is at the very top + return scrollableContent.scrollTop === 0 + }, []) + // enable pull-to-refresh for both ios and android - usePullToRefresh({ - shouldPullToRefresh: () => { - // check if the scrollable content container is at the top - const scrollableContent = document.querySelector('#scrollable-content') - if (!scrollableContent) return false - - // only allow pull-to-refresh when the scrollable container is at the very top - return scrollableContent.scrollTop === 0 - }, - }) + usePullToRefresh({ shouldPullToRefresh }) // Allow access to public paths without authentication const isPublicPath = PUBLIC_ROUTES_REGEX.test(pathName) From 9a8e1d53b52f08b3e89ce2cd3dc24de452f64d8c Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 10 Nov 2025 16:15:19 -0300 Subject: [PATCH 028/121] fix: ptr non-smooth scrolling --- src/app/(mobile-ui)/layout.tsx | 21 +++++++++++++-------- src/hooks/usePullToRefresh.ts | 8 +++++--- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index f912ee9fb..886fe791c 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -9,14 +9,13 @@ import { useAuth } from '@/context/authContext' import { hasValidJwtToken } from '@/utils/auth' import classNames from 'classnames' import { usePathname } from 'next/navigation' -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' import { twMerge } from 'tailwind-merge' import '../../styles/globals.css' import SupportDrawer from '@/components/Global/SupportDrawer' import JoinWaitlistPage from '@/components/Invites/JoinWaitlistPage' import { useRouter } from 'next/navigation' import { Banner } from '@/components/Global/Banner' -import { useDeviceType } from '@/hooks/useGetDeviceType' import { useSetupStore } from '@/redux/hooks' import ForceIOSPWAInstall from '@/components/ForceIOSPWAInstall' import { PUBLIC_ROUTES_REGEX } from '@/constants/routes' @@ -37,25 +36,31 @@ const Layout = ({ children }: { children: React.ReactNode }) => { const isSupport = pathName === '/support' const alignStart = isHome || isHistory || isSupport const router = useRouter() - const { deviceType: detectedDeviceType } = useDeviceType() const { showIosPwaInstallScreen } = useSetupStore() + // cache the scrollable content element to avoid DOM queries on every scroll event + const scrollableContentRef = useRef(null) + useEffect(() => { // check for JWT token setHasToken(hasValidJwtToken()) setIsReady(true) + + // cache the scrollable content element reference + scrollableContentRef.current = document.querySelector('#scrollable-content') }, []) // memoizing shouldPullToRefresh callback to prevent re-initialization on every render - // @dev: note this fixes the issue where scrolling scolling a long list would trigger pull-to-refresh + // caching the element ref prevents expensive DOM queries during scroll events const shouldPullToRefresh = useCallback(() => { - // check if the scrollable content container is at the top - const scrollableContent = document.querySelector('#scrollable-content') + // use cached reference to avoid DOM query on every scroll event + const scrollableContent = scrollableContentRef.current if (!scrollableContent) return false - // only allow pull-to-refresh when the scrollable container is at the very top - return scrollableContent.scrollTop === 0 + // only allow pull-to-refresh when at the very top (with small threshold for precision) + // threshold helps prevent interference with normal upward scrolling + return scrollableContent.scrollTop <= 1 }, []) // enable pull-to-refresh for both ios and android diff --git a/src/hooks/usePullToRefresh.ts b/src/hooks/usePullToRefresh.ts index 3ac2323fb..293cd1f8f 100644 --- a/src/hooks/usePullToRefresh.ts +++ b/src/hooks/usePullToRefresh.ts @@ -34,9 +34,11 @@ export const usePullToRefresh = (options: UsePullToRefreshOptions = {}) => { instructionsReleaseToRefresh: 'Release to refresh', instructionsRefreshing: 'Refreshing...', shouldPullToRefresh: shouldPullToRefresh || defaultShouldPullToRefresh, - distThreshold: 70, - distMax: 120, - distReload: 80, + distThreshold: 80, + distMax: 140, + distReload: 90, + // resistance makes pull-to-refresh feel more intentional + resistanceFunction: (t: number) => Math.min(1, t / 2.5), }) return () => { From 30ab4b0b586977a93e9834563d170ac830ec1b81 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 10 Nov 2025 16:22:38 -0300 Subject: [PATCH 029/121] fix: remove resistance property --- src/hooks/usePullToRefresh.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/hooks/usePullToRefresh.ts b/src/hooks/usePullToRefresh.ts index 293cd1f8f..8420499eb 100644 --- a/src/hooks/usePullToRefresh.ts +++ b/src/hooks/usePullToRefresh.ts @@ -37,8 +37,6 @@ export const usePullToRefresh = (options: UsePullToRefreshOptions = {}) => { distThreshold: 80, distMax: 140, distReload: 90, - // resistance makes pull-to-refresh feel more intentional - resistanceFunction: (t: number) => Math.min(1, t / 2.5), }) return () => { From eee23cec48e92fd18a3ef80dad9057095bb7637d Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 10 Nov 2025 16:40:21 -0300 Subject: [PATCH 030/121] fix: ptr disabled on ios --- src/app/(mobile-ui)/layout.tsx | 21 ++++++++++++--------- src/hooks/usePullToRefresh.ts | 31 +++++++++++++++++++++++++------ 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index 886fe791c..b67bd4eab 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -46,21 +46,24 @@ const Layout = ({ children }: { children: React.ReactNode }) => { setHasToken(hasValidJwtToken()) setIsReady(true) - - // cache the scrollable content element reference - scrollableContentRef.current = document.querySelector('#scrollable-content') }, []) // memoizing shouldPullToRefresh callback to prevent re-initialization on every render - // caching the element ref prevents expensive DOM queries during scroll events + // lazy-load element ref to ensure DOM is ready const shouldPullToRefresh = useCallback(() => { - // use cached reference to avoid DOM query on every scroll event + // lazy-load the element reference if not cached yet + if (!scrollableContentRef.current) { + scrollableContentRef.current = document.querySelector('#scrollable-content') + } + const scrollableContent = scrollableContentRef.current - if (!scrollableContent) return false + if (!scrollableContent) { + // fallback to window scroll check if element not found + return window.scrollY === 0 + } - // only allow pull-to-refresh when at the very top (with small threshold for precision) - // threshold helps prevent interference with normal upward scrolling - return scrollableContent.scrollTop <= 1 + // only allow pull-to-refresh when at the very top + return scrollableContent.scrollTop === 0 }, []) // enable pull-to-refresh for both ios and android diff --git a/src/hooks/usePullToRefresh.ts b/src/hooks/usePullToRefresh.ts index 8420499eb..166faa92d 100644 --- a/src/hooks/usePullToRefresh.ts +++ b/src/hooks/usePullToRefresh.ts @@ -1,7 +1,12 @@ import { useRouter } from 'next/navigation' -import { useEffect } from 'react' +import { useEffect, useRef } from 'react' import PullToRefresh from 'pulltorefreshjs' +// pull-to-refresh configuration constants +const DIST_THRESHOLD = 70 // minimum pull distance to trigger refresh +const DIST_MAX = 120 // maximum pull distance (visual limit) +const DIST_RELOAD = 80 // distance at which refresh is triggered when released + interface UsePullToRefreshOptions { // custom function to determine if pull-to-refresh should be enabled // defaults to checking if window is at the top @@ -19,6 +24,14 @@ export const usePullToRefresh = (options: UsePullToRefreshOptions = {}) => { const router = useRouter() const { shouldPullToRefresh, enabled = true } = options + // store callback in ref to avoid re-initialization when function reference changes + const shouldPullToRefreshRef = useRef(shouldPullToRefresh) + + // update ref when callback changes + useEffect(() => { + shouldPullToRefreshRef.current = shouldPullToRefresh + }, [shouldPullToRefresh]) + useEffect(() => { if (typeof window === 'undefined' || !enabled) return @@ -28,19 +41,25 @@ export const usePullToRefresh = (options: UsePullToRefreshOptions = {}) => { PullToRefresh.init({ mainElement: 'body', onRefresh: () => { + // router.refresh() returns void, wrap in promise for pulltorefreshjs router.refresh() + return Promise.resolve() }, instructionsPullToRefresh: 'Pull down to refresh', instructionsReleaseToRefresh: 'Release to refresh', instructionsRefreshing: 'Refreshing...', - shouldPullToRefresh: shouldPullToRefresh || defaultShouldPullToRefresh, - distThreshold: 80, - distMax: 140, - distReload: 90, + shouldPullToRefresh: () => { + // use latest callback from ref + const callback = shouldPullToRefreshRef.current + return callback ? callback() : defaultShouldPullToRefresh() + }, + distThreshold: DIST_THRESHOLD, + distMax: DIST_MAX, + distReload: DIST_RELOAD, }) return () => { PullToRefresh.destroyAll() } - }, [router, shouldPullToRefresh, enabled]) + }, [router, enabled]) } From a326248ec4f540627a9bba9ec514fad79be67943 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 10 Nov 2025 17:58:31 -0300 Subject: [PATCH 031/121] fix: qr icon size --- src/components/Global/DirectSendQR/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Global/DirectSendQR/index.tsx b/src/components/Global/DirectSendQR/index.tsx index f77305b89..fb6ddf230 100644 --- a/src/components/Global/DirectSendQR/index.tsx +++ b/src/components/Global/DirectSendQR/index.tsx @@ -438,7 +438,7 @@ export default function DirectSendQr({ shadowSize="4" shadowType="primary" className={twMerge( - 'mx-auto h-20 w-20 cursor-pointer justify-center rounded-full p-3 hover:bg-primary-1/100', + 'mx-auto h-20 w-20 cursor-pointer justify-center rounded-full p-4.5 hover:bg-primary-1/100', className )} disabled={disabled} From 2a4c76601a4d7c0a425969b1c55ac149e96413e9 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Tue, 11 Nov 2025 13:14:09 -0300 Subject: [PATCH 032/121] fix: remove semantic req banner --- src/app/[...recipient]/client.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/app/[...recipient]/client.tsx b/src/app/[...recipient]/client.tsx index af94bb4a5..a46e4c2f4 100644 --- a/src/app/[...recipient]/client.tsx +++ b/src/app/[...recipient]/client.tsx @@ -25,7 +25,6 @@ import { useRouter, useSearchParams } from 'next/navigation' import { useEffect, useMemo, useRef, useState } from 'react' import { twMerge } from 'tailwind-merge' import { fetchTokenPrice } from '@/app/actions/tokens' -import { GenericBanner } from '@/components/Global/Banner' import { RequestFulfillmentBankFlowStep, useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext' import ExternalWalletFulfilManager from '@/components/Request/views/ExternalWalletFulfilManager' import ActionList from '@/components/Common/ActionList' @@ -487,15 +486,6 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props) return (
- {!user && parsedPaymentData?.recipient?.recipientType !== 'USERNAME' && ( -
- -
- )} {currentView === 'INITIAL' && (
Date: Tue, 11 Nov 2025 17:52:17 -0300 Subject: [PATCH 033/121] fix: copy --- src/constants/actionlist.consts.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/constants/actionlist.consts.ts b/src/constants/actionlist.consts.ts index e3295b371..320e345f8 100644 --- a/src/constants/actionlist.consts.ts +++ b/src/constants/actionlist.consts.ts @@ -15,7 +15,7 @@ export const ACTION_METHODS: PaymentMethod[] = [ { id: 'bank', title: 'Bank', - description: 'EUR, USD, ARS (more coming soon)', + description: 'EUR, USD, MXN, ARS & more', icons: [ 'https://flagcdn.com/w160/ar.png', 'https://flagcdn.com/w160/de.png', From 631525d6fc7522780f31cc59e4924a6ad4585e46 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Tue, 11 Nov 2025 18:43:52 -0300 Subject: [PATCH 034/121] feat: save devconnect onramp intent based on chain + external address --- .../add-money/[country]/bank/page.tsx | 11 +++ src/app/[...recipient]/client.tsx | 29 ++++++- .../AddMoney/components/MantecaAddMoney.tsx | 10 ++- src/lib/url-parser/parser.ts | 13 +++- src/lib/url-parser/types/payment.ts | 2 + src/utils/general.utils.ts | 76 +++++++++++++++++-- 6 files changed, 129 insertions(+), 12 deletions(-) diff --git a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx index a54a02b5c..85c3e8171 100644 --- a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx +++ b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx @@ -25,6 +25,8 @@ import { getCurrencyConfig, getCurrencySymbol, getMinimumAmount } from '@/utils/ import { OnrampConfirmationModal } from '@/components/AddMoney/components/OnrampConfirmationModal' import { InitiateBridgeKYCModal } from '@/components/Kyc/InitiateBridgeKYCModal' import InfoCard from '@/components/Global/InfoCard' +import { usePaymentStore } from '@/redux/hooks' +import { saveDevConnectIntent } from '@/utils' type AddStep = 'inputAmount' | 'kyc' | 'loading' | 'collectUserDetails' | 'showDetails' @@ -47,6 +49,7 @@ export default function OnrampBankPage() { const { balance } = useWallet() const { user, fetchUser } = useAuth() const { createOnramp, isLoading: isCreatingOnramp, error: onrampError } = useCreateOnramp() + const { parsedPaymentData } = usePaymentStore() const selectedCountryPath = params.country as string const selectedCountry = useMemo(() => { @@ -173,6 +176,14 @@ export default function OnrampBankPage() { setOnrampData(onrampDataResponse) if (onrampDataResponse.transferId) { + // @dev: save devconnect intent if this is a devconnect flow - to be deleted post devconnect + saveDevConnectIntent( + user?.user?.userId, + parsedPaymentData, + cleanedAmount, + onrampDataResponse.transferId + ) + setStep('showDetails') } else { setError({ diff --git a/src/app/[...recipient]/client.tsx b/src/app/[...recipient]/client.tsx index a46e4c2f4..c24b9f908 100644 --- a/src/app/[...recipient]/client.tsx +++ b/src/app/[...recipient]/client.tsx @@ -20,7 +20,7 @@ import { useAppDispatch, usePaymentStore } from '@/redux/hooks' import { paymentActions } from '@/redux/slices/payment-slice' import { chargesApi } from '@/services/charges' import { requestsApi } from '@/services/requests' -import { formatAmount, getInitialsFromName } from '@/utils' +import { formatAmount, getInitialsFromName, updateUserPreferences, getUserPreferences } from '@/utils' import { useRouter, useSearchParams } from 'next/navigation' import { useEffect, useMemo, useRef, useState } from 'react' import { twMerge } from 'tailwind-merge' @@ -31,6 +31,7 @@ import ActionList from '@/components/Common/ActionList' import NavHeader from '@/components/Global/NavHeader' import { ReqFulfillBankFlowManager } from '@/components/Request/views/ReqFulfillBankFlowManager' import SupportCTA from '@/components/Global/SupportCTA' +import MantecaFulfillment from '@/components/Payment/Views/MantecaFulfillment.view' import { BankRequestType, useDetermineBankRequestType } from '@/hooks/useDetermineBankRequestType' import { PointsAction } from '@/services/services.types' import { usePointsCalculation } from '@/hooks/usePointsCalculation' @@ -173,6 +174,26 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props) dispatch(paymentActions.setParsedPaymentData(updatedParsedData)) setIsUrlParsed(true) + // @dev: save devconnect flow info to user preferences so it persists across navigation + // this is needed because payment state gets reset on unmount + if (updatedParsedData.isDevConnectFlow && user?.user?.userId) { + const prefs = getUserPreferences(user.user.userId) + const existingIntents = prefs?.devConnectIntents ?? [] + updateUserPreferences(user.user.userId, { + devConnectIntents: [ + ...existingIntents, + { + id: Date.now().toString(), + recipientAddress: updatedParsedData.recipient?.resolvedAddress ?? '', + chain: updatedParsedData.chain?.chainId ?? '', + amount: updatedParsedData.amount ?? '', + createdAt: Date.now(), + status: 'pending', + }, + ], + }) + } + // render PUBLIC_PROFILE view if applicable if ( updatedParsedData.recipient?.recipientType === 'USERNAME' && @@ -467,6 +488,11 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props) return } + // render manteca fulfillment (mercado pago / pix) + if (fulfillUsingManteca) { + return + } + // render PUBLIC_PROFILE view if ( currentView === 'PUBLIC_PROFILE' && @@ -516,6 +542,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props) isInviteLink={ flow === 'request_pay' && parsedPaymentData?.recipient?.recipientType === 'USERNAME' } // invite link is only available for request pay flow + usdAmount={usdAmount ?? undefined} /> )}
diff --git a/src/components/AddMoney/components/MantecaAddMoney.tsx b/src/components/AddMoney/components/MantecaAddMoney.tsx index a372926c5..bde965826 100644 --- a/src/components/AddMoney/components/MantecaAddMoney.tsx +++ b/src/components/AddMoney/components/MantecaAddMoney.tsx @@ -2,7 +2,7 @@ import { type FC, useEffect, useMemo, useState } from 'react' import MantecaDepositShareDetails from '@/components/AddMoney/components/MantecaDepositShareDetails' import InputAmountStep from '@/components/AddMoney/components/InputAmountStep' -import { useParams, useRouter } from 'next/navigation' +import { useParams, useRouter, useSearchParams } from 'next/navigation' import { type CountryData, countryData } from '@/components/AddMoney/consts' import { type MantecaDepositResponseData } from '@/types/manteca.types' import { MantecaGeoSpecificKycModal } from '@/components/Kyc/InitiateMantecaKYCModal' @@ -15,6 +15,8 @@ import { PEANUT_WALLET_TOKEN_DECIMALS, TRANSACTIONS } from '@/constants' import { parseUnits } from 'viem' import { useQueryClient } from '@tanstack/react-query' import useKycStatus from '@/hooks/useKycStatus' +import { usePaymentStore } from '@/redux/hooks' +import { saveDevConnectIntent } from '@/utils' interface MantecaAddMoneyProps { source: 'bank' | 'regionalMethod' @@ -28,6 +30,7 @@ const MIN_DEPOSIT_AMOUNT = '1' const MantecaAddMoney: FC = ({ source }) => { const params = useParams() const router = useRouter() + const searchParams = useSearchParams() const [step, setStep] = useState('inputAmount') const [isCreatingDeposit, setIsCreatingDeposit] = useState(false) const [tokenAmount, setTokenAmount] = useState('') @@ -37,6 +40,7 @@ const MantecaAddMoney: FC = ({ source }) => { const [depositDetails, setDepositDetails] = useState() const [isKycModalOpen, setIsKycModalOpen] = useState(false) const queryClient = useQueryClient() + const { parsedPaymentData } = usePaymentStore() const selectedCountryPath = params.country as string const selectedCountry = useMemo(() => { @@ -114,6 +118,10 @@ const MantecaAddMoney: FC = ({ source }) => { return } setDepositDetails(depositData.data) + + // @dev: save devconnect intent if this is a devconnect flow - to be deleted post devconnect + saveDevConnectIntent(user?.user?.userId, parsedPaymentData, usdAmount, depositData.data?.externalId) + setStep('depositDetails') } catch (error) { console.log(error) diff --git a/src/lib/url-parser/parser.ts b/src/lib/url-parser/parser.ts index 8df2f5ad7..0cd0c247b 100644 --- a/src/lib/url-parser/parser.ts +++ b/src/lib/url-parser/parser.ts @@ -6,7 +6,6 @@ import { validateAndResolveRecipient } from '../validation/recipient' import { getChainDetails, getTokenAndChainDetails } from '../validation/token' import { AmountValidationError } from './errors' import { type ParsedURL } from './types/payment' -import { areEvmAddressesEqual } from '@/utils' export function parseAmountAndToken(amountString: string): { amount?: string; token?: string } { // remove all whitespace @@ -160,13 +159,23 @@ export async function parsePaymentURL( tokenDetails = chainDetails.tokens.find((t) => t.symbol.toLowerCase() === 'USDC'.toLowerCase()) } - // 6. Construct and return the final result + // 6. Determine if this is a DevConnect flow + // @dev: note, this needs to be deleted post devconnect + // devconnect flow: external address + base chain specified in URL + const isDevConnectFlow = + recipientDetails.recipientType === 'ADDRESS' && + chainId !== undefined && + chainId.toLowerCase() === 'base' && + chainDetails !== undefined + + // 7. Construct and return the final result return { parsedUrl: { recipient: recipientDetails, amount: parsedAmount?.amount, token: tokenDetails, chain: chainDetails, + isDevConnectFlow, }, error: null, } diff --git a/src/lib/url-parser/types/payment.ts b/src/lib/url-parser/types/payment.ts index 1c7a9b31e..37f7d46ce 100644 --- a/src/lib/url-parser/types/payment.ts +++ b/src/lib/url-parser/types/payment.ts @@ -13,4 +13,6 @@ export interface ParsedURL { amount?: string token?: interfaces.ISquidToken chain?: interfaces.ISquidChain & { tokens: interfaces.ISquidToken[] } + /** @dev: flag indicating if this is a devconnect flow (external address + base chain), to be deleted post devconnect */ + isDevConnectFlow?: boolean } diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts index 3992ca303..fa1aa4770 100644 --- a/src/utils/general.utils.ts +++ b/src/utils/general.utils.ts @@ -1,15 +1,8 @@ import * as consts from '@/constants' -import { - PEANUT_WALLET_SUPPORTED_TOKENS, - STABLE_COINS, - USER_OPERATION_REVERT_REASON_TOPIC, - ENS_NAME_REGEX, -} from '@/constants' -import * as interfaces from '@/interfaces' +import { STABLE_COINS, USER_OPERATION_REVERT_REASON_TOPIC, ENS_NAME_REGEX } from '@/constants' import { AccountType } from '@/interfaces' import * as Sentry from '@sentry/nextjs' import peanut, { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk' -import { SiweMessage } from 'siwe' import type { Address, TransactionReceipt } from 'viem' import { getAddress, isAddress, erc20Abi } from 'viem' import * as wagmiChains from 'wagmi/chains' @@ -17,6 +10,7 @@ import { getPublicClient, type ChainId } from '@/app/actions/clients' import { NATIVE_TOKEN_ADDRESS, SQUID_ETH_ADDRESS } from './token.utils' import { type ChargeEntry } from '@/services/services.types' import { toWebAuthnKey } from '@zerodev/passkey-validator' +import type { ParsedURL } from '@/lib/url-parser/types/payment' export function urlBase64ToUint8Array(base64String: string) { const padding = '='.repeat((4 - (base64String.length % 4)) % 4) @@ -462,6 +456,16 @@ export type UserPreferences = { notifBannerShowAt?: number notifModalClosed?: boolean hasSeenBalanceWarning?: { value: boolean; expiry: number } + // @dev: note, this needs to be deleted post devconnect + devConnectIntents?: Array<{ + id: string + recipientAddress: string + chain: string + amount: string + onrampId?: string + createdAt: number + status: 'pending' | 'completed' + }> } export const updateUserPreferences = ( @@ -935,3 +939,59 @@ export const getContributorsFromCharge = (charges: ChargeEntry[]) => { } }) } + +/** + * helper function to save devconnect intent to user preferences + * @dev: note, this needs to be deleted post devconnect + */ +export const saveDevConnectIntent = ( + userId: string | undefined, + parsedPaymentData: ParsedURL | null, + amount: string, + onrampId?: string +): void => { + if (!userId) return + + // check both redux state and user preferences (fallback if state was reset) + const devconnectFlowData = + parsedPaymentData?.isDevConnectFlow && parsedPaymentData.recipient && parsedPaymentData.chain + ? { + recipientAddress: parsedPaymentData.recipient.resolvedAddress, + chain: parsedPaymentData.chain.chainId, + } + : (() => { + try { + const prefs = getUserPreferences(userId) + const intents = prefs?.devConnectIntents ?? [] + // get the most recent pending intent + return intents.find((i) => i.status === 'pending') ?? null + } catch (e) { + console.error('Failed to read devconnect intent from user preferences:', e) + } + return null + })() + + if (devconnectFlowData) { + try { + const prefs = getUserPreferences(userId) + const existingIntents = prefs?.devConnectIntents ?? [] + updateUserPreferences(userId, { + devConnectIntents: [ + ...existingIntents, + { + id: Date.now().toString(), + recipientAddress: devconnectFlowData.recipientAddress, + chain: devconnectFlowData.chain, + amount: amount.replace(/,/g, ''), + onrampId, + createdAt: Date.now(), + status: 'pending', + }, + ], + }) + } catch (intentError) { + console.error('Failed to save DevConnect intent:', intentError) + // don't block the flow if intent storage fails + } + } +} From caece224d5d70b2e23aa8e7176e952df9185bda4 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Tue, 11 Nov 2025 18:45:06 -0300 Subject: [PATCH 035/121] feat: show cta carousel on home page --- src/components/Common/ActionList.tsx | 48 ++++++++++---- .../Common/ActionListDaimoPayButton.tsx | 6 +- src/hooks/useHomeCarouselCTAs.tsx | 63 ++++++++++++++++++- 3 files changed, 102 insertions(+), 15 deletions(-) diff --git a/src/components/Common/ActionList.tsx b/src/components/Common/ActionList.tsx index f2a0f95cf..e128f5ba3 100644 --- a/src/components/Common/ActionList.tsx +++ b/src/components/Common/ActionList.tsx @@ -5,7 +5,7 @@ import IconStack from '../Global/IconStack' import { ClaimBankFlowStep, useClaimBankFlow } from '@/context/ClaimBankFlowContext' import { type ClaimLinkData } from '@/services/sendLinks' import { formatUnits } from 'viem' -import { useContext, useCallback, useMemo, useState } from 'react' +import { useContext, useMemo, useState } from 'react' import ActionModal from '@/components/Global/ActionModal' import Divider from '../0_Bruddle/Divider' import { Button } from '../0_Bruddle' @@ -35,6 +35,7 @@ import { useGeoFilteredPaymentOptions } from '@/hooks/useGeoFilteredPaymentOptio import { tokenSelectorContext } from '@/context' import SupportCTA from '../Global/SupportCTA' import { usePaymentInitiator, type InitiatePaymentPayload } from '@/hooks/usePaymentInitiator' +import useKycStatus from '@/hooks/useKycStatus' interface IActionListProps { flow: 'claim' | 'request' @@ -44,6 +45,7 @@ interface IActionListProps { isInviteLink?: boolean showDevconnectMethod?: boolean setExternalWalletRecipient?: (recipient: { name: string | undefined; address: string }) => void + usdAmount?: string } /** @@ -62,6 +64,7 @@ export default function ActionList({ isInviteLink = false, showDevconnectMethod, setExternalWalletRecipient, + usdAmount: usdAmountValue, }: IActionListProps) { const router = useRouter() const { @@ -103,6 +106,7 @@ export default function ActionList({ const [showUsePeanutBalanceModal, setShowUsePeanutBalanceModal] = useState(false) const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null) const { initiatePayment } = usePaymentInitiator() + const { isUserMantecaKycApproved } = useKycStatus() const dispatch = useAppDispatch() @@ -116,16 +120,13 @@ export default function ActionList({ return false }, [claimType, requestType, flow]) - // Memoize the callback to prevent unnecessary re-sorts - const isMethodUnavailable = useCallback( - (method: PaymentMethod) => method.soon || (method.id === 'bank' && requiresVerification), - [requiresVerification] - ) - // use the hook to filter and sort payment methods based on geolocation const { filteredMethods: sortedActionMethods, isLoading: isGeoLoading } = useGeoFilteredPaymentOptions({ sortUnavailable: true, - isMethodUnavailable: (method) => method.soon || (method.id === 'bank' && requiresVerification), + isMethodUnavailable: (method) => + method.soon || + (method.id === 'bank' && requiresVerification) || + (['mercadopago', 'pix'].includes(method.id) && !isUserMantecaKycApproved), methods: showDevconnectMethod ? DEVCONNECT_CLAIM_METHODS : undefined, }) @@ -133,7 +134,21 @@ export default function ActionList({ const amountInUsd = usdAmount ? parseFloat(usdAmount) : 0 const hasSufficientPeanutBalance = user && balance && Number(balance) >= amountInUsd + // check if amount is valid for request flow + const currentRequestAmount = usdAmountValue ?? usdAmount + const requestAmountValue = currentRequestAmount ? parseFloat(currentRequestAmount) : 0 + const isAmountEntered = flow === 'request' ? !!currentRequestAmount && requestAmountValue > 0 : true + const handleMethodClick = async (method: PaymentMethod, bypassBalanceModal = false) => { + // validate minimum amount for bank/mercado pago/pix in request flow + if (flow === 'request' && requestLinkData) { + // check minimum amount for bank/mercado pago/pix + if (['bank', 'mercadopago', 'pix'].includes(method.id) && requestAmountValue < 5) { + setShowMinAmountError(true) + return + } + } + // For request flow: Check if user has sufficient Peanut balance and hasn't dismissed the modal if (flow === 'request' && requestLinkData && !bypassBalanceModal) { if (!isUsePeanutBalanceModalShown && hasSufficientPeanutBalance) { @@ -225,7 +240,8 @@ export default function ActionList({ break case 'mercadopago': case 'pix': - if (!user) { + // note: we only check for manteca kyc in request flow cuz claim has its own verification logic based on senders/receivers kyc status + if (!user || !isUserMantecaKycApproved) { addParamStep('regional-req-fulfill') setIsGuestVerificationModalOpen(true) return @@ -306,6 +322,7 @@ export default function ActionList({ } return true // Proceed with Daimo }} + isDisabled={!isAmountEntered} />
) @@ -323,7 +340,11 @@ export default function ActionList({ }} key={method.id} method={method} - requiresVerification={method.id === 'bank' && requiresVerification} + requiresVerification={ + (method.id === 'bank' && requiresVerification) || + (['mercadopago', 'pix'].includes(method.id) && !isUserMantecaKycApproved) + } + isDisabled={!isAmountEntered} /> ) })} @@ -333,13 +354,14 @@ export default function ActionList({ visible={showMinAmountError} onClose={() => setShowMinAmountError(false)} title="Minimum Amount " - description={'The minimum amount for a bank transaction is $5. Please try a different method.'} + description={'The minimum amount for a this payment method is $5. Please try a different method.'} icon="alert" ctas={[{ text: 'Close', shadowSize: '4', onClick: () => setShowMinAmountError(false) }]} iconContainerClassName="bg-yellow-400" preventClose={false} modalPanelClassName="max-w-md mx-8" /> + void requiresVerification?: boolean + isDisabled?: boolean }) => { return ( } onClick={onClick} - isDisabled={method.soon} + isDisabled={method.soon || isDisabled} rightContent={} /> ) diff --git a/src/components/Common/ActionListDaimoPayButton.tsx b/src/components/Common/ActionListDaimoPayButton.tsx index 97d6a7d94..a2683aeea 100644 --- a/src/components/Common/ActionListDaimoPayButton.tsx +++ b/src/components/Common/ActionListDaimoPayButton.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState, useRef, useEffect } from 'react' +import { useCallback, useState, useRef } from 'react' import IconStack from '../Global/IconStack' import { useAppDispatch, usePaymentStore } from '@/redux/hooks' import { paymentActions } from '@/redux/slices/payment-slice' @@ -16,12 +16,14 @@ interface ActionListDaimoPayButtonProps { handleContinueWithPeanut: () => void showConfirmModal: boolean onBeforeShow?: () => boolean | Promise + isDisabled?: boolean } const ActionListDaimoPayButton = ({ handleContinueWithPeanut, showConfirmModal, onBeforeShow, + isDisabled, }: ActionListDaimoPayButtonProps) => { const dispatch = useAppDispatch() const searchParams = useSearchParams() @@ -179,7 +181,7 @@ const ActionListDaimoPayButton = ({ return ( { const router = useRouter() const { isUserKycApproved, isUserBridgeKycUnderReview } = useKycStatus() + // -------------------------------------------------------------------------------------------------- + /** + * check if there's a pending devconnect intent and clean up old ones + * + * @dev: note, this code needs to be deleted post devconnect, this is just to temporarily support onramp to devconnect wallet using bank accounts + */ + const pendingDevConnectIntent = useMemo(() => { + if (!user?.user?.userId) return undefined + + const prefs = getUserPreferences(user.user.userId) + const intents = prefs?.devConnectIntents ?? [] + + // clean up intents older than 7 days + const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000 + const recentIntents = intents.filter( + (intent) => intent.createdAt >= sevenDaysAgo && intent.status === 'pending' + ) + + // update user preferences if we cleaned up any old intents + if (recentIntents.length !== intents.length) { + updateUserPreferences(user.user.userId, { + devConnectIntents: recentIntents, + }) + } + + // get the most recent pending intent (sorted by createdAt descending) + return recentIntents.sort((a, b) => b.createdAt - a.createdAt)[0] + }, [user?.user?.userId]) + // -------------------------------------------------------------------------------------------------- + const generateCarouselCTAs = useCallback(() => { const _carouselCTAs: CarouselCTA[] = [] + // ------------------------------------------------------------------------------------------------ + // add devconnect payment cta if there's a pending intent + // @dev: note, this code needs to be deleted post devconnect, this is just to temporarily support onramp to devconnect wallet using bank accounts + if (pendingDevConnectIntent) { + _carouselCTAs.push({ + id: 'devconnect-payment', + title: 'Fund your DevConnect wallet', + description: `Deposit funds to your DevConnect wallet`, + logo: DEVCONNECT_LOGO, + icon: 'arrow-up-right', + onClick: () => { + // navigate to the semantic request flow where user can pay with peanut wallet + const paymentUrl = `/${pendingDevConnectIntent.recipientAddress}@${pendingDevConnectIntent.chain}` + router.push(paymentUrl) + }, + onClose: () => { + // remove the intent when user dismisses the cta + if (user?.user?.userId) { + updateUserPreferences(user.user.userId, { + devConnectIntents: [], + }) + } + }, + }) + } + // -------------------------------------------------------------------------------------------------- + // add notification prompt as first item if it should be shown if (showReminderBanner) { _carouselCTAs.push({ @@ -73,6 +132,8 @@ export const useHomeCarouselCTAs = () => { setCarouselCTAs(_carouselCTAs) }, [ + pendingDevConnectIntent, + user?.user?.userId, showReminderBanner, isPermissionDenied, isUserKycApproved, From a06db4b2bdb6c315161ee68a267d5f2a8175e16e Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Tue, 11 Nov 2025 19:48:27 -0300 Subject: [PATCH 036/121] fix: cr review comments --- src/app/[...recipient]/client.tsx | 72 +++++++++++++---- .../components/AddMoneyBankDetails.tsx | 2 +- .../AddMoney/components/MantecaAddMoney.tsx | 12 ++- src/components/Common/ActionList.tsx | 18 +++-- src/constants/index.ts | 1 + src/constants/payment.consts.ts | 29 +++++++ src/hooks/useHomeCarouselCTAs.tsx | 32 ++++++-- src/utils/general.utils.ts | 78 +++++++++++++++---- 8 files changed, 193 insertions(+), 51 deletions(-) create mode 100644 src/constants/payment.consts.ts diff --git a/src/app/[...recipient]/client.tsx b/src/app/[...recipient]/client.tsx index 5196780ea..007190da8 100644 --- a/src/app/[...recipient]/client.tsx +++ b/src/app/[...recipient]/client.tsx @@ -36,6 +36,7 @@ import { BankRequestType, useDetermineBankRequestType } from '@/hooks/useDetermi import { PointsAction } from '@/services/services.types' import { usePointsCalculation } from '@/hooks/usePointsCalculation' import { useHaptic } from 'use-haptic' +import { MAX_DEVCONNECT_INTENTS } from '@/constants' export type PaymentFlow = 'request_pay' | 'external_wallet' | 'direct_pay' | 'withdraw' interface Props { @@ -177,24 +178,65 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props) dispatch(paymentActions.setParsedPaymentData(updatedParsedData)) setIsUrlParsed(true) + // ------------------------------------------------------------------------------------------------ // @dev: save devconnect flow info to user preferences so it persists across navigation // this is needed because payment state gets reset on unmount if (updatedParsedData.isDevConnectFlow && user?.user?.userId) { - const prefs = getUserPreferences(user.user.userId) - const existingIntents = prefs?.devConnectIntents ?? [] - updateUserPreferences(user.user.userId, { - devConnectIntents: [ - ...existingIntents, - { - id: Date.now().toString(), - recipientAddress: updatedParsedData.recipient?.resolvedAddress ?? '', - chain: updatedParsedData.chain?.chainId ?? '', - amount: updatedParsedData.amount ?? '', - createdAt: Date.now(), - status: 'pending', - }, - ], - }) + // validate required fields before storing (amount is optional at this stage) + const recipientAddress = updatedParsedData.recipient?.resolvedAddress + const chainId = updatedParsedData.chain?.chainId + const amount = updatedParsedData.amount + + if (recipientAddress && chainId) { + // create deterministic id based on recipient + chain only (not amount, as amount changes during flow) + const createDeterministicId = (addr: string, chain: string): string => { + const str = `${addr.toLowerCase()}-${chain.toLowerCase()}` + let hash = 0 + for (let i = 0; i < str.length; i++) { + const char = str.charCodeAt(i) + hash = (hash << 5) - hash + char + hash = hash & hash // convert to 32bit integer + } + return Math.abs(hash).toString(36) + } + + const intentId = createDeterministicId(recipientAddress, chainId) + const prefs = getUserPreferences(user.user.userId) + const existingIntents = prefs?.devConnectIntents ?? [] + + // check if intent with same id already exists + const existingIntent = existingIntents.find((intent) => intent.id === intentId) + + if (!existingIntent) { + // create new intent + const sortedIntents = existingIntents.sort((a, b) => b.createdAt - a.createdAt) + const prunedIntents = sortedIntents.slice(0, MAX_DEVCONNECT_INTENTS - 1) + + updateUserPreferences(user.user.userId, { + devConnectIntents: [ + { + id: intentId, + recipientAddress, + chain: chainId, + amount: amount || '', + createdAt: Date.now(), + status: 'pending', + }, + ...prunedIntents, + ], + }) + } else if (amount && amount !== existingIntent.amount) { + // update existing intent with new amount if provided + const updatedIntents = existingIntents.map((intent) => + intent.id === intentId ? { ...intent, amount, createdAt: Date.now() } : intent + ) + updateUserPreferences(user.user.userId, { + devConnectIntents: updatedIntents, + }) + } + } + + // ------------------------------------------------------------------------------------------------ } // render PUBLIC_PROFILE view if applicable diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index 9e970d76a..7b97640bb 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -85,7 +85,7 @@ export default function AddMoneyBankDetails({ flow = 'add-money' }: IAddMoneyBan // data from contexts based on flow const amount = isAddMoneyFlow ? onrampContext.amountToOnramp - : requestFulfilmentOnrampData?.depositInstructions?.amount + : (requestFulfilmentOnrampData?.depositInstructions?.amount ?? chargeDetails?.tokenAmount) const onrampData = isAddMoneyFlow ? onrampContext.onrampData : requestFulfilmentOnrampData const currencySymbolBasedOnCountry = useMemo(() => { diff --git a/src/components/AddMoney/components/MantecaAddMoney.tsx b/src/components/AddMoney/components/MantecaAddMoney.tsx index bde965826..2b2f1bc60 100644 --- a/src/components/AddMoney/components/MantecaAddMoney.tsx +++ b/src/components/AddMoney/components/MantecaAddMoney.tsx @@ -17,6 +17,7 @@ import { useQueryClient } from '@tanstack/react-query' import useKycStatus from '@/hooks/useKycStatus' import { usePaymentStore } from '@/redux/hooks' import { saveDevConnectIntent } from '@/utils' +import { MAX_MANTECA_DEPOSIT_AMOUNT, MIN_MANTECA_DEPOSIT_AMOUNT } from '@/constants/payment.consts' interface MantecaAddMoneyProps { source: 'bank' | 'regionalMethod' @@ -24,9 +25,6 @@ interface MantecaAddMoneyProps { type stepType = 'inputAmount' | 'depositDetails' -const MAX_DEPOSIT_AMOUNT = '2000' -const MIN_DEPOSIT_AMOUNT = '1' - const MantecaAddMoney: FC = ({ source }) => { const params = useParams() const router = useRouter() @@ -69,10 +67,10 @@ const MantecaAddMoney: FC = ({ source }) => { return } const paymentAmount = parseUnits(usdAmount.replace(/,/g, ''), PEANUT_WALLET_TOKEN_DECIMALS) - if (paymentAmount < parseUnits(MIN_DEPOSIT_AMOUNT, PEANUT_WALLET_TOKEN_DECIMALS)) { - setError(`Deposit amount must be at least $${MIN_DEPOSIT_AMOUNT}`) - } else if (paymentAmount > parseUnits(MAX_DEPOSIT_AMOUNT, PEANUT_WALLET_TOKEN_DECIMALS)) { - setError(`Deposit amount exceeds maximum limit of $${MAX_DEPOSIT_AMOUNT}`) + if (paymentAmount < parseUnits(MIN_MANTECA_DEPOSIT_AMOUNT.toString(), PEANUT_WALLET_TOKEN_DECIMALS)) { + setError(`Deposit amount must be at least $${MIN_MANTECA_DEPOSIT_AMOUNT}`) + } else if (paymentAmount > parseUnits(MAX_MANTECA_DEPOSIT_AMOUNT.toString(), PEANUT_WALLET_TOKEN_DECIMALS)) { + setError(`Deposit amount exceeds maximum limit of $${MAX_MANTECA_DEPOSIT_AMOUNT}`) } else { setError(null) } diff --git a/src/components/Common/ActionList.tsx b/src/components/Common/ActionList.tsx index e128f5ba3..657e439ee 100644 --- a/src/components/Common/ActionList.tsx +++ b/src/components/Common/ActionList.tsx @@ -36,6 +36,7 @@ import { tokenSelectorContext } from '@/context' import SupportCTA from '../Global/SupportCTA' import { usePaymentInitiator, type InitiatePaymentPayload } from '@/hooks/usePaymentInitiator' import useKycStatus from '@/hooks/useKycStatus' +import { MIN_BANK_TRANSFER_AMOUNT, validateMinimumAmount } from '@/constants/payment.consts' interface IActionListProps { flow: 'claim' | 'request' @@ -105,8 +106,9 @@ export default function ActionList({ const [isUsePeanutBalanceModalShown, setIsUsePeanutBalanceModalShown] = useState(false) const [showUsePeanutBalanceModal, setShowUsePeanutBalanceModal] = useState(false) const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null) - const { initiatePayment } = usePaymentInitiator() + const { initiatePayment, loadingStep } = usePaymentInitiator() const { isUserMantecaKycApproved } = useKycStatus() + const isPaymentInProgress = loadingStep !== 'Idle' && loadingStep !== 'Error' && loadingStep !== 'Success' const dispatch = useAppDispatch() @@ -143,7 +145,10 @@ export default function ActionList({ // validate minimum amount for bank/mercado pago/pix in request flow if (flow === 'request' && requestLinkData) { // check minimum amount for bank/mercado pago/pix - if (['bank', 'mercadopago', 'pix'].includes(method.id) && requestAmountValue < 5) { + if ( + ['bank', 'mercadopago', 'pix'].includes(method.id) && + !validateMinimumAmount(requestAmountValue, method.id) + ) { setShowMinAmountError(true) return } @@ -160,7 +165,7 @@ export default function ActionList({ if (flow === 'claim' && claimLinkData) { const amountInUsd = parseFloat(formatUnits(claimLinkData.amount, claimLinkData.tokenDecimals)) - if (method.id === 'bank' && amountInUsd < 5) { + if (method.id === 'bank' && !validateMinimumAmount(amountInUsd, method.id)) { setShowMinAmountError(true) return } @@ -222,7 +227,8 @@ export default function ActionList({ addParamStep('bank') setIsGuestVerificationModalOpen(true) } else { - if (!chargeDetails && parsedPaymentData) { + // prevent duplicate charge creation if already in progress or charge exists + if (!chargeDetails && parsedPaymentData && !isPaymentInProgress) { const payload: InitiatePaymentPayload = { recipient: parsedPaymentData?.recipient, tokenAmount: usdAmount ?? '0', @@ -353,8 +359,8 @@ export default function ActionList({ setShowMinAmountError(false)} - title="Minimum Amount " - description={'The minimum amount for a this payment method is $5. Please try a different method.'} + title="Minimum Amount" + description={`The minimum amount for this payment method is $${MIN_BANK_TRANSFER_AMOUNT}. Please enter a higher amount or try a different method.`} icon="alert" ctas={[{ text: 'Close', shadowSize: '4', onClick: () => setShowMinAmountError(false) }]} iconContainerClassName="bg-yellow-400" diff --git a/src/constants/index.ts b/src/constants/index.ts index f4a42c5f7..d47cbb342 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -6,5 +6,6 @@ export * from './loadingStates.consts' export * from './query.consts' export * from './zerodev.consts' export * from './manteca.consts' +export * from './payment.consts' export * from './routes' export * from './stateCodes.consts' diff --git a/src/constants/payment.consts.ts b/src/constants/payment.consts.ts new file mode 100644 index 000000000..8721a6c1c --- /dev/null +++ b/src/constants/payment.consts.ts @@ -0,0 +1,29 @@ +// minimum amount requirements for different payment methods (in USD) +export const MIN_BANK_TRANSFER_AMOUNT = 5 +export const MIN_MERCADOPAGO_AMOUNT = 5 +export const MIN_PIX_AMOUNT = 5 + +// deposit limits for manteca regional onramps (in USD) +export const MAX_MANTECA_DEPOSIT_AMOUNT = 2000 +export const MIN_MANTECA_DEPOSIT_AMOUNT = 1 + +// time constants for devconnect intent cleanup +export const DEVCONNECT_INTENT_EXPIRY_MS = 7 * 24 * 60 * 60 * 1000 // 7 days + +// maximum number of devconnect intents to store per user +export const MAX_DEVCONNECT_INTENTS = 10 + +/** + * validate if amount meets minimum requirement for a payment method + * @param amount - amount in USD + * @param methodId - payment method identifier + * @returns true if amount is valid, false otherwise + */ +export const validateMinimumAmount = (amount: number, methodId: string): boolean => { + const minimums: Record = { + bank: MIN_BANK_TRANSFER_AMOUNT, + mercadopago: MIN_MERCADOPAGO_AMOUNT, + pix: MIN_PIX_AMOUNT, + } + return amount >= (minimums[methodId] ?? 0) +} diff --git a/src/hooks/useHomeCarouselCTAs.tsx b/src/hooks/useHomeCarouselCTAs.tsx index 60fc885e9..ce30d24ce 100644 --- a/src/hooks/useHomeCarouselCTAs.tsx +++ b/src/hooks/useHomeCarouselCTAs.tsx @@ -2,7 +2,7 @@ import { type IconName } from '@/components/Global/Icons/Icon' import { useAuth } from '@/context/authContext' -import { useEffect, useState, useCallback, useMemo } from 'react' +import { useEffect, useState, useCallback } from 'react' import { useNotifications } from './useNotifications' import { useRouter } from 'next/navigation' import useKycStatus from './useKycStatus' @@ -10,6 +10,7 @@ import type { StaticImageData } from 'next/image' import { useQrCodeContext } from '@/context/QrCodeContext' import { getUserPreferences, updateUserPreferences } from '@/utils' import { DEVCONNECT_LOGO } from '@/assets' +import { DEVCONNECT_INTENT_EXPIRY_MS } from '@/constants' export type CarouselCTA = { id: string @@ -42,17 +43,31 @@ export const useHomeCarouselCTAs = () => { * * @dev: note, this code needs to be deleted post devconnect, this is just to temporarily support onramp to devconnect wallet using bank accounts */ - const pendingDevConnectIntent = useMemo(() => { - if (!user?.user?.userId) return undefined + const [pendingDevConnectIntent, setPendingDevConnectIntent] = useState< + | { + id: string + recipientAddress: string + chain: string + amount: string + onrampId?: string + createdAt: number + status: 'pending' | 'completed' + } + | undefined + >(undefined) + + useEffect(() => { + if (!user?.user?.userId) { + setPendingDevConnectIntent(undefined) + return + } const prefs = getUserPreferences(user.user.userId) const intents = prefs?.devConnectIntents ?? [] // clean up intents older than 7 days - const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000 - const recentIntents = intents.filter( - (intent) => intent.createdAt >= sevenDaysAgo && intent.status === 'pending' - ) + const expiryTime = Date.now() - DEVCONNECT_INTENT_EXPIRY_MS + const recentIntents = intents.filter((intent) => intent.createdAt >= expiryTime && intent.status === 'pending') // update user preferences if we cleaned up any old intents if (recentIntents.length !== intents.length) { @@ -62,7 +77,8 @@ export const useHomeCarouselCTAs = () => { } // get the most recent pending intent (sorted by createdAt descending) - return recentIntents.sort((a, b) => b.createdAt - a.createdAt)[0] + const mostRecentIntent = recentIntents.sort((a, b) => b.createdAt - a.createdAt)[0] + setPendingDevConnectIntent(mostRecentIntent) }, [user?.user?.userId]) // -------------------------------------------------------------------------------------------------- diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts index fa1aa4770..f13c7a6ea 100644 --- a/src/utils/general.utils.ts +++ b/src/utils/general.utils.ts @@ -944,6 +944,22 @@ export const getContributorsFromCharge = (charges: ChargeEntry[]) => { * helper function to save devconnect intent to user preferences * @dev: note, this needs to be deleted post devconnect */ +/** + * create deterministic id for devconnect intent based on recipient + chain only + * amount is not included as it can change during the flow + * @dev: to be deleted post devconnect + */ +const createDevConnectIntentId = (recipientAddress: string, chain: string): string => { + const str = `${recipientAddress.toLowerCase()}-${chain.toLowerCase()}` + let hash = 0 + for (let i = 0; i < str.length; i++) { + const char = str.charCodeAt(i) + hash = (hash << 5) - hash + char + hash = hash & hash // convert to 32bit integer + } + return Math.abs(hash).toString(36) +} + export const saveDevConnectIntent = ( userId: string | undefined, parsedPaymentData: ParsedURL | null, @@ -972,23 +988,57 @@ export const saveDevConnectIntent = ( })() if (devconnectFlowData) { + // validate required fields + const recipientAddress = devconnectFlowData.recipientAddress + const chain = devconnectFlowData.chain + const cleanedAmount = amount.replace(/,/g, '') + + if (!recipientAddress || !chain || !cleanedAmount) { + console.warn('Skipping DevConnect intent: missing required fields') + return + } + try { + // create deterministic id based on address + chain only + const intentId = createDevConnectIntentId(recipientAddress, chain) + const prefs = getUserPreferences(userId) const existingIntents = prefs?.devConnectIntents ?? [] - updateUserPreferences(userId, { - devConnectIntents: [ - ...existingIntents, - { - id: Date.now().toString(), - recipientAddress: devconnectFlowData.recipientAddress, - chain: devconnectFlowData.chain, - amount: amount.replace(/,/g, ''), - onrampId, - createdAt: Date.now(), - status: 'pending', - }, - ], - }) + + // check if intent with same id already exists + const existingIntent = existingIntents.find((intent) => intent.id === intentId) + + if (!existingIntent) { + // create new intent + const { MAX_DEVCONNECT_INTENTS } = require('@/constants/payment.consts') + const sortedIntents = existingIntents.sort((a, b) => b.createdAt - a.createdAt) + const prunedIntents = sortedIntents.slice(0, MAX_DEVCONNECT_INTENTS - 1) + + updateUserPreferences(userId, { + devConnectIntents: [ + { + id: intentId, + recipientAddress, + chain, + amount: cleanedAmount, + onrampId, + createdAt: Date.now(), + status: 'pending', + }, + ...prunedIntents, + ], + }) + } else { + // update existing intent with new amount and onrampId + const updatedIntents = existingIntents.map((intent) => + intent.id === intentId + ? { ...intent, amount: cleanedAmount, onrampId, createdAt: Date.now() } + : intent + ) + updateUserPreferences(userId, { + devConnectIntents: updatedIntents, + }) + } } catch (intentError) { console.error('Failed to save DevConnect intent:', intentError) // don't block the flow if intent storage fails From a16c31bc1e70cd867260e68cf19710afc3a2ddd8 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Tue, 11 Nov 2025 20:10:33 -0300 Subject: [PATCH 037/121] fix: parser tests --- src/utils/__tests__/url-parser.test.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/utils/__tests__/url-parser.test.ts b/src/utils/__tests__/url-parser.test.ts index d45325baa..cdd19fe73 100644 --- a/src/utils/__tests__/url-parser.test.ts +++ b/src/utils/__tests__/url-parser.test.ts @@ -267,6 +267,7 @@ describe('URL Parser Tests', () => { chain: expect.objectContaining({ chainId: 42161 }), amount: '0.1', token: expect.objectContaining({ symbol: 'USDC' }), + isDevConnectFlow: false, }) }) @@ -318,6 +319,7 @@ describe('URL Parser Tests', () => { chain: undefined, token: undefined, amount: undefined, + isDevConnectFlow: false, }) }) From 4c06b0f97b532629fd5d917e3931a17d9b4078c3 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Tue, 11 Nov 2025 20:14:29 -0300 Subject: [PATCH 038/121] fix: wrong balance warning showing when it shouldnt be --- src/app/(mobile-ui)/qr-pay/page.tsx | 5 +++-- src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx | 5 +++-- src/app/(mobile-ui)/withdraw/manteca/page.tsx | 5 +++-- src/components/Send/link/views/Initial.link.send.view.tsx | 5 +++-- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index ecf161ec3..ede0845d4 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -761,7 +761,8 @@ export default function QRPayPage() { } // Skip balance check if transaction is being processed - if (hasPendingTransactions || isWaitingForWebSocket) { + // isLoading covers the gap between sendMoney completing and completeQrPayment finishing + if (hasPendingTransactions || isWaitingForWebSocket || isLoading) { return } @@ -777,7 +778,7 @@ export default function QRPayPage() { } else { setBalanceErrorMessage(null) } - }, [usdAmount, balance, hasPendingTransactions, isWaitingForWebSocket, isSuccess]) + }, [usdAmount, balance, hasPendingTransactions, isWaitingForWebSocket, isSuccess, isLoading]) // Use points confetti hook for animation - must be called unconditionally usePointsConfetti(isSuccess && pointsData?.estimatedPoints ? pointsData.estimatedPoints : undefined, pointsDivRef) diff --git a/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx b/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx index 9cfac792a..fdd9ab6db 100644 --- a/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx +++ b/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx @@ -230,7 +230,8 @@ export default function WithdrawBankPage() { // Balance validation useEffect(() => { // Skip balance check if transaction is pending - if (hasPendingTransactions) { + // isLoading covers the gap between sendMoney completing and confirmOfframp completing + if (hasPendingTransactions || isLoading) { return } @@ -245,7 +246,7 @@ export default function WithdrawBankPage() { } else { setBalanceErrorMessage(null) } - }, [amountToWithdraw, balance, hasPendingTransactions]) + }, [amountToWithdraw, balance, hasPendingTransactions, isLoading]) if (!bankAccount) { return null diff --git a/src/app/(mobile-ui)/withdraw/manteca/page.tsx b/src/app/(mobile-ui)/withdraw/manteca/page.tsx index 5a5ccc225..05c811a31 100644 --- a/src/app/(mobile-ui)/withdraw/manteca/page.tsx +++ b/src/app/(mobile-ui)/withdraw/manteca/page.tsx @@ -305,7 +305,8 @@ export default function MantecaWithdrawFlow() { useEffect(() => { // Skip balance check if transaction is being processed // Use hasPendingTransactions to prevent race condition with optimistic updates - if (hasPendingTransactions) { + // isLoading covers the gap between sendMoney completing and API withdraw completing + if (hasPendingTransactions || isLoading) { return } @@ -323,7 +324,7 @@ export default function MantecaWithdrawFlow() { } else { setBalanceErrorMessage(null) } - }, [usdAmount, balance, hasPendingTransactions]) + }, [usdAmount, balance, hasPendingTransactions, isLoading]) // Fetch points early to avoid latency penalty - fetch as soon as we have usdAmount // Use flowId as uniqueId to prevent cache collisions between different withdrawal flows diff --git a/src/components/Send/link/views/Initial.link.send.view.tsx b/src/components/Send/link/views/Initial.link.send.view.tsx index ef669ec57..007b69988 100644 --- a/src/components/Send/link/views/Initial.link.send.view.tsx +++ b/src/components/Send/link/views/Initial.link.send.view.tsx @@ -100,7 +100,8 @@ const LinkSendInitialView = () => { useEffect(() => { // Skip balance check if transaction is pending // (balance may be optimistically updated during transaction) - if (hasPendingTransactions) { + // isLoading covers the createLink operation which directly uses handleSendUserOpEncoded + if (hasPendingTransactions || isLoading) { return } @@ -132,7 +133,7 @@ const LinkSendInitialView = () => { }) ) } - }, [peanutWalletBalance, tokenValue, dispatch, hasPendingTransactions]) + }, [peanutWalletBalance, tokenValue, dispatch, hasPendingTransactions, isLoading]) return (
From d9806e3d354891ea38f0fa35a5d2db80693efaf1 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Tue, 11 Nov 2025 20:42:45 -0300 Subject: [PATCH 039/121] fix min amount --- src/app/(mobile-ui)/qr-pay/page.tsx | 15 +++++++++++++-- src/constants/payment.consts.ts | 3 +++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index ede0845d4..6b8351f55 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -22,6 +22,7 @@ import { calculateSavingsInCents, isArgentinaMantecaQrPayment, getSavingsMessage import ErrorAlert from '@/components/Global/ErrorAlert' import { PEANUT_WALLET_TOKEN_DECIMALS, TRANSACTIONS, PERK_HOLD_DURATION_MS } from '@/constants' import { MANTECA_DEPOSIT_ADDRESS } from '@/constants/manteca.consts' +import { MIN_MANTECA_QR_PAYMENT_AMOUNT } from '@/constants/payment.consts' import { formatUnits, parseUnits } from 'viem' import type { TransactionReceipt, Hash } from 'viem' import { useTransactionDetailsDrawer } from '@/hooks/useTransactionDetailsDrawer' @@ -752,7 +753,7 @@ export default function QRPayPage() { holdTimerRef.current = timer }, [claimPerk]) - // Check user balance + // Check user balance and payment limits useEffect(() => { // Skip balance check on success screen (balance may not have updated yet) if (isSuccess) { @@ -771,6 +772,16 @@ export default function QRPayPage() { return } const paymentAmount = parseUnits(usdAmount.replace(/,/g, ''), PEANUT_WALLET_TOKEN_DECIMALS) + + // Manteca-specific validation (PIX, MercadoPago, QR3) + if (paymentProcessor === 'MANTECA') { + if (paymentAmount < parseUnits(MIN_MANTECA_QR_PAYMENT_AMOUNT.toString(), PEANUT_WALLET_TOKEN_DECIMALS)) { + setBalanceErrorMessage(`Payment amount must be at least $${MIN_MANTECA_QR_PAYMENT_AMOUNT}`) + return + } + } + + // Common validations for all payment processors if (paymentAmount > parseUnits(MAX_QR_PAYMENT_AMOUNT, PEANUT_WALLET_TOKEN_DECIMALS)) { setBalanceErrorMessage(`QR payment amount exceeds maximum limit of $${MAX_QR_PAYMENT_AMOUNT}`) } else if (paymentAmount > balance) { @@ -778,7 +789,7 @@ export default function QRPayPage() { } else { setBalanceErrorMessage(null) } - }, [usdAmount, balance, hasPendingTransactions, isWaitingForWebSocket, isSuccess, isLoading]) + }, [usdAmount, balance, hasPendingTransactions, isWaitingForWebSocket, isSuccess, isLoading, paymentProcessor]) // Use points confetti hook for animation - must be called unconditionally usePointsConfetti(isSuccess && pointsData?.estimatedPoints ? pointsData.estimatedPoints : undefined, pointsDivRef) diff --git a/src/constants/payment.consts.ts b/src/constants/payment.consts.ts index 8721a6c1c..7d62bd236 100644 --- a/src/constants/payment.consts.ts +++ b/src/constants/payment.consts.ts @@ -7,6 +7,9 @@ export const MIN_PIX_AMOUNT = 5 export const MAX_MANTECA_DEPOSIT_AMOUNT = 2000 export const MIN_MANTECA_DEPOSIT_AMOUNT = 1 +// QR payment limits for manteca (PIX, MercadoPago, QR3) +export const MIN_MANTECA_QR_PAYMENT_AMOUNT = 0.1 // Manteca provider minimum + // time constants for devconnect intent cleanup export const DEVCONNECT_INTENT_EXPIRY_MS = 7 * 24 * 60 * 60 * 1000 // 7 days From c2556bbdf800ba99d5054f6c696a5ddd77b08a90 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Wed, 12 Nov 2025 12:19:03 -0300 Subject: [PATCH 040/121] feat: enable crosschain payments using token selector --- src/components/Payment/PaymentForm/index.tsx | 90 +++++++++++++------- 1 file changed, 61 insertions(+), 29 deletions(-) diff --git a/src/components/Payment/PaymentForm/index.tsx b/src/components/Payment/PaymentForm/index.tsx index c9f3c7180..eb09cc5f1 100644 --- a/src/components/Payment/PaymentForm/index.tsx +++ b/src/components/Payment/PaymentForm/index.tsx @@ -10,8 +10,9 @@ import FileUploadInput from '@/components/Global/FileUploadInput' import { type IconName } from '@/components/Global/Icons/Icon' import NavHeader from '@/components/Global/NavHeader' import TokenAmountInput from '@/components/Global/TokenAmountInput' +import TokenSelector from '@/components/Global/TokenSelector/TokenSelector' import UserCard from '@/components/User/UserCard' -import { PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants' +import { PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS, PEANUT_WALLET_CHAIN } from '@/constants' import { tokenSelectorContext } from '@/context' import { useAuth } from '@/context/authContext' import { useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext' @@ -182,6 +183,9 @@ export const PaymentForm = ({ setInputTokenAmount(amount) } + // for ADDRESS/ENS recipients, initialize token/chain from URL or defaults + const isExternalRecipient = recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS' + if (chain) { setSelectedChainID((chain.chainId || requestDetails?.chainId) ?? '') if (!token && !requestDetails?.tokenAddress) { @@ -191,15 +195,37 @@ export const PaymentForm = ({ // Note: decimals automatically derived by useTokenPrice hook } } + } else if (isExternalRecipient && !selectedChainID) { + // default to arbitrum for external recipients if no chain specified + setSelectedChainID(PEANUT_WALLET_CHAIN.id.toString()) } if (token) { setSelectedTokenAddress((token.address || requestDetails?.tokenAddress) ?? '') // Note: decimals automatically derived by useTokenPrice hook + } else if (isExternalRecipient && !selectedTokenAddress && selectedChainID) { + // default to USDC for external recipients if no token specified + const chainData = supportedSquidChainsAndTokens[selectedChainID] + const defaultToken = chainData?.tokens.find((t) => t.symbol.toLowerCase() === 'usdc') + if (defaultToken) { + setSelectedTokenAddress(defaultToken.address) + } } setInitialSetupDone(true) - }, [chain, token, amount, initialSetupDone, requestDetails, showRequestPotInitialView, isRequestPotLink]) + }, [ + chain, + token, + amount, + initialSetupDone, + requestDetails, + showRequestPotInitialView, + isRequestPotLink, + recipient?.recipientType, + selectedChainID, + selectedTokenAddress, + supportedSquidChainsAndTokens, + ]) // reset error when component mounts or recipient changes useEffect(() => { @@ -244,12 +270,14 @@ export const PaymentForm = ({ } } else { // regular send/pay + const isExternalRecipient = recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS' + if ( !showRequestPotInitialView && // don't apply balance check on request pot payment initial view isActivePeanutWallet && - areEvmAddressesEqual(selectedTokenAddress, PEANUT_WALLET_TOKEN) + (areEvmAddressesEqual(selectedTokenAddress, PEANUT_WALLET_TOKEN) || !isExternalRecipient) ) { - // peanut wallet payment + // peanut wallet payment (for USERNAME or default token) const walletNumeric = parseFloat(String(peanutWalletBalance).replace(/,/g, '')) if (walletNumeric < parsedInputAmount) { dispatch(paymentActions.setError('Insufficient balance')) @@ -274,6 +302,9 @@ export const PaymentForm = ({ } else { dispatch(paymentActions.setError(null)) } + } else if (isExternalRecipient && isActivePeanutWallet) { + // for external recipients with peanut wallet, balance will be checked via cross-chain route + dispatch(paymentActions.setError(null)) } else { dispatch(paymentActions.setError(null)) } @@ -304,6 +335,7 @@ export const PaymentForm = ({ currentView, isProcessing, hasPendingTransactions, + recipient?.recipientType, ]) // Calculate USD value when requested token price is available @@ -339,7 +371,12 @@ export const PaymentForm = ({ (!!inputTokenAmount && parseFloat(inputTokenAmount) > 0) || (!!usdValue && parseFloat(usdValue) > 0) } - const tokenSelected = !!selectedTokenAddress && !!selectedChainID + const isExternalRecipient = recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS' + // for external recipients, token selection is required + // for USERNAME recipients, token is always PEANUT_WALLET_TOKEN + const tokenSelected = isExternalRecipient + ? !!selectedTokenAddress && !!selectedChainID + : !!selectedTokenAddress && !!selectedChainID const recipientExists = !!recipient const walletConnected = isConnected @@ -809,30 +846,25 @@ export const PaymentForm = ({ defaultSliderSuggestedAmount={defaultSliderValue.suggestedAmount} /> - {/* - Url request flow (peanut.me/
) - If we are paying from peanut wallet we only need to - select a token if it's not included in the url - From other wallets we always need to select a token - */} - {/* we dont need this as daimo will handle token selection */} - {/* {!(chain && isPeanutWalletConnected) && isConnected && !isAddMoneyFlow && ( -
- {!isPeanutWalletUSDC && !selectedTokenAddress && !selectedChainID && ( -
Select token and chain to receive
- )} - - {!isPeanutWalletUSDC && selectedTokenAddress && selectedChainID && ( -
- Use USDC on Arbitrum for free transactions! -
- )} -
- )} */} - - {/* {isExternalWalletConnected && isAddMoneyFlow && ( - - )} */} + {/* Token selector for external ADDRESS/ENS recipients */} + {!isExternalWalletFlow && + !showRequestPotInitialView && + (recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS') && + isConnected && ( +
+ + {selectedTokenAddress && + selectedChainID && + !( + areEvmAddressesEqual(selectedTokenAddress, PEANUT_WALLET_TOKEN) && + selectedChainID === PEANUT_WALLET_CHAIN.id.toString() + ) && ( +
+ Use USDC on Arbitrum for free transactions! +
+ )} +
+ )} {isDirectUsdPayment && ( Date: Wed, 12 Nov 2025 13:26:16 -0300 Subject: [PATCH 041/121] fix: use daimo for external wallet payments --- src/app/[...recipient]/client.tsx | 7 -- src/components/Common/ActionList.tsx | 21 ++++-- .../Common/ActionListDaimoPayButton.tsx | 6 ++ src/components/Payment/PaymentForm/index.tsx | 16 +---- .../views/ExternalWalletFulfilManager.tsx | 67 ------------------- .../views/ExternalWalletFulfilMethods.tsx | 45 ------------- src/context/RequestFulfillmentFlowContext.tsx | 18 ----- 7 files changed, 24 insertions(+), 156 deletions(-) delete mode 100644 src/components/Request/views/ExternalWalletFulfilManager.tsx delete mode 100644 src/components/Request/views/ExternalWalletFulfilMethods.tsx diff --git a/src/app/[...recipient]/client.tsx b/src/app/[...recipient]/client.tsx index 007190da8..bbb5fd15c 100644 --- a/src/app/[...recipient]/client.tsx +++ b/src/app/[...recipient]/client.tsx @@ -26,7 +26,6 @@ import { useEffect, useMemo, useRef, useState } from 'react' import { twMerge } from 'tailwind-merge' import { fetchTokenPrice } from '@/app/actions/tokens' import { RequestFulfillmentBankFlowStep, useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext' -import ExternalWalletFulfilManager from '@/components/Request/views/ExternalWalletFulfilManager' import ActionList from '@/components/Common/ActionList' import NavHeader from '@/components/Global/NavHeader' import { ReqFulfillBankFlowManager } from '@/components/Request/views/ReqFulfillBankFlowManager' @@ -67,7 +66,6 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props) const { isDrawerOpen, selectedTransaction, openTransactionDetails } = useTransactionDetailsDrawer() const [isLinkCancelling, setisLinkCancelling] = useState(false) const { - showExternalWalletFulfillMethods, showRequestFulfilmentBankFlowManager, setShowRequestFulfilmentBankFlowManager, setFlowStep: setRequestFulfilmentBankFlowStep, @@ -524,11 +522,6 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props) ) } - // render external wallet fulfilment methods - if (showExternalWalletFulfillMethods) { - return - } - // render request fulfilment bank flow manager if (showRequestFulfilmentBankFlowManager) { return diff --git a/src/components/Common/ActionList.tsx b/src/components/Common/ActionList.tsx index 657e439ee..1aecc768e 100644 --- a/src/components/Common/ActionList.tsx +++ b/src/components/Common/ActionList.tsx @@ -5,7 +5,7 @@ import IconStack from '../Global/IconStack' import { ClaimBankFlowStep, useClaimBankFlow } from '@/context/ClaimBankFlowContext' import { type ClaimLinkData } from '@/services/sendLinks' import { formatUnits } from 'viem' -import { useContext, useMemo, useState } from 'react' +import { useContext, useMemo, useState, useRef } from 'react' import ActionModal from '@/components/Global/ActionModal' import Divider from '../0_Bruddle/Divider' import { Button } from '../0_Bruddle' @@ -86,7 +86,6 @@ export default function ActionList({ const { addParamStep } = useClaimLink() const { setShowRequestFulfilmentBankFlowManager, - setShowExternalWalletFulfillMethods, setFlowStep: setRequestFulfilmentBankFlowStep, setFulfillUsingManteca, setRegionalMethodType: setRequestFulfillmentRegionalMethodType, @@ -109,6 +108,8 @@ export default function ActionList({ const { initiatePayment, loadingStep } = usePaymentInitiator() const { isUserMantecaKycApproved } = useKycStatus() const isPaymentInProgress = loadingStep !== 'Idle' && loadingStep !== 'Error' && loadingStep !== 'Success' + // ref to store daimo button click handler for triggering from balance modal + const daimoButtonClickRef = useRef<(() => void) | null>(null) const dispatch = useAppDispatch() @@ -255,9 +256,7 @@ export default function ActionList({ setRequestFulfillmentRegionalMethodType(method.id) setFulfillUsingManteca(true) break - case 'exchange-or-wallet': - setShowExternalWalletFulfillMethods(true) - break + // 'exchange-or-wallet' case removed - handled by ActionListDaimoPayButton } } } @@ -329,6 +328,7 @@ export default function ActionList({ return true // Proceed with Daimo }} isDisabled={!isAmountEntered} + clickHandlerRef={daimoButtonClickRef} />
) @@ -427,7 +427,16 @@ export default function ActionList({ setIsUsePeanutBalanceModalShown(true) // Proceed with the method the user originally selected if (selectedPaymentMethod) { - handleMethodClick(selectedPaymentMethod, true) // true = bypass modal check + // for exchange-or-wallet, trigger daimo button after state updates + if (selectedPaymentMethod.id === 'exchange-or-wallet' && daimoButtonClickRef.current) { + // use setTimeout to ensure state updates are processed before triggering daimo + setTimeout(() => { + daimoButtonClickRef.current?.() + }, 0) + } else { + // for other methods, use handleMethodClick + handleMethodClick(selectedPaymentMethod, true) // true = bypass modal check + } } setSelectedPaymentMethod(null) }, diff --git a/src/components/Common/ActionListDaimoPayButton.tsx b/src/components/Common/ActionListDaimoPayButton.tsx index a2683aeea..2c96d3142 100644 --- a/src/components/Common/ActionListDaimoPayButton.tsx +++ b/src/components/Common/ActionListDaimoPayButton.tsx @@ -17,6 +17,7 @@ interface ActionListDaimoPayButtonProps { showConfirmModal: boolean onBeforeShow?: () => boolean | Promise isDisabled?: boolean + clickHandlerRef?: React.MutableRefObject<(() => void) | null> } const ActionListDaimoPayButton = ({ @@ -24,6 +25,7 @@ const ActionListDaimoPayButton = ({ showConfirmModal, onBeforeShow, isDisabled, + clickHandlerRef, }: ActionListDaimoPayButtonProps) => { const dispatch = useAppDispatch() const searchParams = useSearchParams() @@ -178,6 +180,10 @@ const ActionListDaimoPayButton = ({ {({ onClick, loading }) => { // Store the onClick function so we can trigger it from elsewhere daimoPayButtonClickRef.current = onClick + // also store in parent ref if provided (for balance modal in ActionList) + if (clickHandlerRef) { + clickHandlerRef.current = onClick + } return ( { - if (isExternalWalletFlow) { - setShowExternalWalletFulfillMethods(true) - setExternalWalletFulfillMethod(null) - return - } else if (window.history.length > 1) { + if (window.history.length > 1) { router.back() } else { router.push('/') diff --git a/src/components/Request/views/ExternalWalletFulfilManager.tsx b/src/components/Request/views/ExternalWalletFulfilManager.tsx deleted file mode 100644 index 389ed9005..000000000 --- a/src/components/Request/views/ExternalWalletFulfilManager.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext' -import ExternalWalletFulfilMethods from './ExternalWalletFulfilMethods' -import AddMoneyCryptoPage from '@/app/(mobile-ui)/add-money/crypto/page' -import { type ParsedURL } from '@/lib/url-parser/types/payment' -import { usePaymentStore } from '@/redux/hooks' -import ConfirmPaymentView from '@/components/Payment/Views/Confirm.payment.view' -import DirectSuccessView from '@/components/Payment/Views/Status.payment.view' -import { PaymentForm } from '@/components/Payment/PaymentForm' - -export default function ExternalWalletFulfilManager({ parsedPaymentData }: { parsedPaymentData: ParsedURL }) { - const { - showExternalWalletFulfillMethods, - externalWalletFulfillMethod, - setExternalWalletFulfillMethod, - setShowExternalWalletFulfillMethods, - } = useRequestFulfillmentFlow() - const { currentView } = usePaymentStore() - - if (externalWalletFulfillMethod === 'wallet') { - switch (currentView) { - case 'INITIAL': - return ( - - ) - case 'CONFIRM': - return - case 'STATUS': - return ( - - ) - default: - break - } - } - - if (externalWalletFulfillMethod === 'exchange') { - return ( - { - setExternalWalletFulfillMethod(null) - setShowExternalWalletFulfillMethods(true) - }} - /> - ) - } - - if (showExternalWalletFulfillMethods) { - return setShowExternalWalletFulfillMethods(false)} /> - } - - return null -} diff --git a/src/components/Request/views/ExternalWalletFulfilMethods.tsx b/src/components/Request/views/ExternalWalletFulfilMethods.tsx deleted file mode 100644 index 94acb7fd8..000000000 --- a/src/components/Request/views/ExternalWalletFulfilMethods.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { BINANCE_LOGO, LEMON_LOGO, RIPIO_LOGO } from '@/assets' -import { METAMASK_LOGO, RAINBOW_LOGO, TRUST_WALLET_SMALL_LOGO } from '@/assets/wallets' -import { MethodCard } from '@/components/Common/ActionList' -import NavHeader from '@/components/Global/NavHeader' -import { type PaymentMethod } from '@/constants/actionlist.consts' -import { type ExternalWalletFulfilMethod, useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext' - -const methods: PaymentMethod[] = [ - { - id: 'exchange', - title: 'Exchange', - description: 'Lemon, Binance, Ripio and more', - icons: [RIPIO_LOGO, BINANCE_LOGO, LEMON_LOGO], - soon: false, - }, - { - id: 'wallet', - title: 'Crypto Wallet', - description: 'Metamask, Trustwallet and more', - icons: [RAINBOW_LOGO, TRUST_WALLET_SMALL_LOGO, METAMASK_LOGO], - soon: false, - }, -] - -export default function ExternalWalletFulfilMethods({ onBack }: { onBack: () => void }) { - const { setExternalWalletFulfillMethod } = useRequestFulfillmentFlow() - - return ( -
- -
-
Where will you send from?
- {methods.map((method) => ( - { - setExternalWalletFulfillMethod(method.id as ExternalWalletFulfilMethod) - }} - /> - ))} -
-
- ) -} diff --git a/src/context/RequestFulfillmentFlowContext.tsx b/src/context/RequestFulfillmentFlowContext.tsx index 82ee98a12..d9400aa24 100644 --- a/src/context/RequestFulfillmentFlowContext.tsx +++ b/src/context/RequestFulfillmentFlowContext.tsx @@ -5,8 +5,6 @@ import { type CountryData } from '@/components/AddMoney/consts' import { type IOnrampData } from './OnrampFlowContext' import { type User } from '@/interfaces' -export type ExternalWalletFulfilMethod = 'exchange' | 'wallet' - export enum RequestFulfillmentBankFlowStep { BankCountryList = 'bank-country-list', DepositBankDetails = 'deposit-bank-details', @@ -16,12 +14,8 @@ export enum RequestFulfillmentBankFlowStep { interface RequestFulfillmentFlowContextType { resetFlow: () => void - showExternalWalletFulfillMethods: boolean - setShowExternalWalletFulfillMethods: (showExternalWalletFulfillMethods: boolean) => void showRequestFulfilmentBankFlowManager: boolean setShowRequestFulfilmentBankFlowManager: (showRequestFulfilmentBankFlowManager: boolean) => void - externalWalletFulfillMethod: ExternalWalletFulfilMethod | null - setExternalWalletFulfillMethod: (externalWalletFulfillMethod: ExternalWalletFulfilMethod | null) => void flowStep: RequestFulfillmentBankFlowStep | null setFlowStep: (step: RequestFulfillmentBankFlowStep | null) => void selectedCountry: CountryData | null @@ -43,10 +37,6 @@ interface RequestFulfillmentFlowContextType { const RequestFulfillmentFlowContext = createContext(undefined) export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => { - const [showExternalWalletFulfillMethods, setShowExternalWalletFulfillMethods] = useState(false) - const [externalWalletFulfillMethod, setExternalWalletFulfillMethod] = useState( - null - ) const [showRequestFulfilmentBankFlowManager, setShowRequestFulfilmentBankFlowManager] = useState(false) const [flowStep, setFlowStep] = useState(null) const [selectedCountry, setSelectedCountry] = useState(null) @@ -58,8 +48,6 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod const [triggerPayWithPeanut, setTriggerPayWithPeanut] = useState(false) // To trigger the pay with peanut from Action List const resetFlow = useCallback(() => { - setExternalWalletFulfillMethod(null) - setShowExternalWalletFulfillMethods(false) setFlowStep(null) setShowRequestFulfilmentBankFlowManager(false) setSelectedCountry(null) @@ -73,10 +61,6 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod const value = useMemo( () => ({ resetFlow, - externalWalletFulfillMethod, - setExternalWalletFulfillMethod, - showExternalWalletFulfillMethods, - setShowExternalWalletFulfillMethods, flowStep, setFlowStep, showRequestFulfilmentBankFlowManager, @@ -98,8 +82,6 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod }), [ resetFlow, - externalWalletFulfillMethod, - showExternalWalletFulfillMethods, flowStep, showRequestFulfilmentBankFlowManager, selectedCountry, From 710a7e608906d5746bddbed7f878691af9c5f45b Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Wed, 12 Nov 2025 13:27:04 -0300 Subject: [PATCH 042/121] fix: daimo cross chain payments destination chain --- src/components/Common/ActionListDaimoPayButton.tsx | 7 ++++++- src/components/Global/DaimoPayButton/index.tsx | 10 ++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/Common/ActionListDaimoPayButton.tsx b/src/components/Common/ActionListDaimoPayButton.tsx index 2c96d3142..95551cbed 100644 --- a/src/components/Common/ActionListDaimoPayButton.tsx +++ b/src/components/Common/ActionListDaimoPayButton.tsx @@ -117,7 +117,10 @@ const ActionListDaimoPayButton = ({ const result = await completeDaimoPayment({ chargeDetails: chargeDetails, txHash: daimoPaymentResponse.txHash as string, - destinationchainId: daimoPaymentResponse.payment.destination.chainId, + // use destination chain from chargeDetails (not from daimo response) + // chargeDetails has the correct chain from URL/explicit overrides + destinationchainId: + Number(chargeDetails.chainId) ?? Number(daimoPaymentResponse.payment.destination.chainId), payerAddress: peanutWalletAddress ?? daimoPaymentResponse.payment.source.payerAddress, sourceChainId: daimoPaymentResponse.payment.source.chainId, sourceTokenAddress: daimoPaymentResponse.payment.source.tokenAddress, @@ -150,6 +153,8 @@ const ActionListDaimoPayButton = ({ { // First check if parent wants to intercept (e.g. show balance modal) diff --git a/src/components/Global/DaimoPayButton/index.tsx b/src/components/Global/DaimoPayButton/index.tsx index 2702efa0c..cdb6b6732 100644 --- a/src/components/Global/DaimoPayButton/index.tsx +++ b/src/components/Global/DaimoPayButton/index.tsx @@ -13,6 +13,10 @@ export interface DaimoPayButtonProps { amount: string /** The recipient address */ toAddress: string + /** Target chain ID (defaults to Arbitrum if not specified) */ + toChainId?: number + /** Target token address (defaults to USDC on Arbitrum if not specified) */ + toTokenAddress?: string /** * Render function that receives click handler and other props * OR React node for backwards compatibility @@ -51,6 +55,8 @@ export interface DaimoPayButtonProps { export const DaimoPayButton = ({ amount, toAddress, + toChainId, + toTokenAddress, children, variant = 'purple', icon, @@ -139,10 +145,10 @@ export const DaimoPayButton = ({ resetOnSuccess // resets the daimo payment state after payment is successfully completed appId={daimoAppId} intent="Deposit" - toChain={arbitrum.id} + toChain={toChainId ?? arbitrum.id} // use provided chain or default to arbitrum toUnits={amount.replace(/,/g, '')} toAddress={getAddress(toAddress)} - toToken={getAddress(PEANUT_WALLET_TOKEN)} // USDC on arbitrum + toToken={getAddress(toTokenAddress ?? PEANUT_WALLET_TOKEN)} // use provided token or default to usdc on arbitrum onPaymentCompleted={onPaymentCompleted} closeOnSuccess onClose={onClose} From 6f4e0cc2c9f29ad354fd50c4bb75380aca473426 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Wed, 12 Nov 2025 15:39:18 -0300 Subject: [PATCH 043/121] fix: cr comments --- src/components/Common/ActionListDaimoPayButton.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Common/ActionListDaimoPayButton.tsx b/src/components/Common/ActionListDaimoPayButton.tsx index 95551cbed..609978550 100644 --- a/src/components/Common/ActionListDaimoPayButton.tsx +++ b/src/components/Common/ActionListDaimoPayButton.tsx @@ -114,13 +114,18 @@ const ActionListDaimoPayButton = ({ if (chargeDetails) { dispatch(paymentActions.setIsDaimoPaymentProcessing(true)) try { + // validate and parse destination chain id with proper fallback + // use chargeDetails chainId if it's a valid non-negative integer, otherwise use daimo response + const parsedChainId = Number(chargeDetails.chainId) + const destinationChainId = + Number.isInteger(parsedChainId) && parsedChainId >= 0 + ? parsedChainId + : Number(daimoPaymentResponse.payment.destination.chainId) + const result = await completeDaimoPayment({ chargeDetails: chargeDetails, txHash: daimoPaymentResponse.txHash as string, - // use destination chain from chargeDetails (not from daimo response) - // chargeDetails has the correct chain from URL/explicit overrides - destinationchainId: - Number(chargeDetails.chainId) ?? Number(daimoPaymentResponse.payment.destination.chainId), + destinationchainId: destinationChainId, payerAddress: peanutWalletAddress ?? daimoPaymentResponse.payment.source.payerAddress, sourceChainId: daimoPaymentResponse.payment.source.chainId, sourceTokenAddress: daimoPaymentResponse.payment.source.tokenAddress, From 0ff855c4b217a688e7a760472c8499823ebe5d8a Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Wed, 12 Nov 2025 18:10:09 -0300 Subject: [PATCH 044/121] fix: only show token selector wen chain is not in semantic url --- src/components/Payment/PaymentForm/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Payment/PaymentForm/index.tsx b/src/components/Payment/PaymentForm/index.tsx index 9a0e62c37..db8ebd02f 100644 --- a/src/components/Payment/PaymentForm/index.tsx +++ b/src/components/Payment/PaymentForm/index.tsx @@ -837,8 +837,10 @@ export const PaymentForm = ({ /> {/* Token selector for external ADDRESS/ENS recipients */} + {/* only show if chain is not specified in URL */} {!isExternalWalletFlow && !showRequestPotInitialView && + !chain?.chainId && (recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS') && isConnected && (
From 1728970713c4d2b8ee0fb7d66b4dfed3a054935d Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Wed, 12 Nov 2025 22:28:38 -0300 Subject: [PATCH 045/121] feat: better app under bad internet conditions --- src/app/(mobile-ui)/home/page.tsx | 113 +++++--- src/app/(mobile-ui)/qr-pay/page.tsx | 96 ++++++- src/app/layout.tsx | 11 + src/app/sw.ts | 268 +++++++++++++++++- src/components/Claim/useClaimLink.tsx | 8 + src/components/Global/DirectSendQR/index.tsx | 19 +- .../Global/LazyLoadErrorBoundary/index.tsx | 45 +++ .../TransactionDetails/TransactionCard.tsx | 31 +- src/config/wagmi.config.tsx | 23 +- src/context/authContext.tsx | 22 ++ src/context/kernelClient.context.tsx | 54 ++-- src/hooks/useNetworkStatus.ts | 41 +++ src/hooks/wallet/useSendMoney.ts | 4 + 13 files changed, 649 insertions(+), 86 deletions(-) create mode 100644 src/components/Global/LazyLoadErrorBoundary/index.tsx create mode 100644 src/hooks/useNetworkStatus.ts diff --git a/src/app/(mobile-ui)/home/page.tsx b/src/app/(mobile-ui)/home/page.tsx index 8069952e8..8f17b565c 100644 --- a/src/app/(mobile-ui)/home/page.tsx +++ b/src/app/(mobile-ui)/home/page.tsx @@ -3,7 +3,6 @@ import { Button, type ButtonSize, type ButtonVariant } from '@/components/0_Bruddle' import PageContainer from '@/components/0_Bruddle/PageContainer' import { Icon } from '@/components/Global/Icons/Icon' -import IOSInstallPWAModal from '@/components/Global/IOSInstallPWAModal' import Loading from '@/components/Global/Loading' import PeanutLoading from '@/components/Global/PeanutLoading' //import RewardsModal from '@/components/Global/RewardsModal' @@ -16,10 +15,9 @@ import { useUserStore } from '@/redux/hooks' import { formatExtendedNumber, getUserPreferences, printableUsdc, updateUserPreferences, getRedirectUrl } from '@/utils' import { useDisconnect } from '@reown/appkit/react' import Link from 'next/link' -import { useEffect, useMemo, useState, useCallback } from 'react' +import { useEffect, useMemo, useState, useCallback, lazy, Suspense } from 'react' import { twMerge } from 'tailwind-merge' import { useAccount } from 'wagmi' -import BalanceWarningModal from '@/components/Global/BalanceWarningModal' // import ReferralCampaignModal from '@/components/Home/ReferralCampaignModal' // import FloatingReferralButton from '@/components/Home/FloatingReferralButton' import { AccountType } from '@/interfaces' @@ -29,18 +27,25 @@ import { PostSignupActionManager } from '@/components/Global/PostSignupActionMan import { useWithdrawFlow } from '@/context/WithdrawFlowContext' import { useClaimBankFlow } from '@/context/ClaimBankFlowContext' import { useDeviceType, DeviceType } from '@/hooks/useGetDeviceType' -import SetupNotificationsModal from '@/components/Notifications/SetupNotificationsModal' import { useNotifications } from '@/hooks/useNotifications' import useKycStatus from '@/hooks/useKycStatus' import HomeCarouselCTA from '@/components/Home/HomeCarouselCTA' -import NoMoreJailModal from '@/components/Global/NoMoreJailModal' -import EarlyUserModal from '@/components/Global/EarlyUserModal' import InvitesIcon from '@/components/Home/InvitesIcon' import NavigationArrow from '@/components/Global/NavigationArrow' -import KycCompletedModal from '@/components/Home/KycCompletedModal' import { updateUserById } from '@/app/actions/users' import { useHaptic } from 'use-haptic' +// Lazy load heavy modal components (~20-30KB each) to reduce initial bundle size +// Components are only loaded when user triggers them +// Wrapped in error boundaries to gracefully handle chunk load failures +const IOSInstallPWAModal = lazy(() => import('@/components/Global/IOSInstallPWAModal')) +const BalanceWarningModal = lazy(() => import('@/components/Global/BalanceWarningModal')) +const SetupNotificationsModal = lazy(() => import('@/components/Notifications/SetupNotificationsModal')) +const NoMoreJailModal = lazy(() => import('@/components/Global/NoMoreJailModal')) +const EarlyUserModal = lazy(() => import('@/components/Global/EarlyUserModal')) +const KycCompletedModal = lazy(() => import('@/components/Home/KycCompletedModal')) +import LazyLoadErrorBoundary from '@/components/Global/LazyLoadErrorBoundary' + const BALANCE_WARNING_THRESHOLD = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_THRESHOLD ?? '500') const BALANCE_WARNING_EXPIRY = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_EXPIRY ?? '1814400') // 21 days in seconds @@ -215,7 +220,13 @@ export default function Home() { - {showPermissionModal && } + {showPermissionModal && ( + + + + + + )} {/* Render the new Rewards Modal @@ -227,43 +238,69 @@ export default function Home() { */}
{/* iOS PWA Install Modal */} - setShowIOSPWAInstallModal(false)} /> + + + setShowIOSPWAInstallModal(false)} + /> + + {/* Add Money Prompt Modal */} {/* TODO @dev Disabling this, re-enable after properly fixing */} {/* setShowAddMoneyPromptModal(false)} /> */} - - - - - { - // close the modal immediately for better ux - setShowKycModal(false) - // update the database and refetch user to ensure sync - if (user?.user.userId) { - await updateUserById({ - userId: user.user.userId, - showKycCompletedModal: false, - }) - // refetch user to ensure the modal doesn't reappear - await fetchUser() - } - }} - /> + + + + + + + + + + + + + + + { + // close the modal immediately for better ux + setShowKycModal(false) + // update the database and refetch user to ensure sync + if (user?.user.userId) { + await updateUserById({ + userId: user.user.userId, + showKycCompletedModal: false, + }) + // refetch user to ensure the modal doesn't reappear + await fetchUser() + } + }} + /> + + {/* Balance Warning Modal */} - { - setShowBalanceWarningModal(false) - updateUserPreferences(user!.user.userId, { - hasSeenBalanceWarning: { value: true, expiry: Date.now() + BALANCE_WARNING_EXPIRY * 1000 }, - }) - }} - /> + + + { + setShowBalanceWarningModal(false) + updateUserPreferences(user!.user.userId, { + hasSeenBalanceWarning: { + value: true, + expiry: Date.now() + BALANCE_WARNING_EXPIRY * 1000, + }, + }) + }} + /> + + {/* Referral Campaign Modal - DISABLED FOR NOW */} {/* { setIsSuccess(false) @@ -147,7 +148,7 @@ export default function QRPayPage() { setPendingSimpleFiPaymentId(null) setWaitingForMerchantAmount(false) retryCount.current = 0 - // reset perk states + // reset perk states setIsClaimingPerk(false) setPerkClaimed(false) } @@ -443,21 +444,60 @@ export default function QRPayPage() { // 2. The actual payment action is blocked by shouldBlockPay (line 713 & 1109) // 3. KYC modals are shown if needed before user can pay // This reduces latency from 4-5s to <1s for KYC'd users + // + // NETWORK RESILIENCE: Retry network/timeout errors with exponential backoff + // - Max 3 attempts: immediate, +1s delay, +2s delay + // - Provider-specific errors (e.g., "can't decode") are NOT retried + // - Prevents state updates on unmounted component useEffect(() => { if (paymentProcessor !== 'MANTECA') return if (!qrCode || !isPaymentProcessorQR(qrCode)) return if (!!paymentLock || !shouldRetry) return - setShouldRetry(false) - setLoadingState('Fetching details') - mantecaApi - .initiateQrPayment({ qrCode }) - .then((pl) => { + const MAX_RETRIES = 2 // Total 3 attempts (initial + 2 retries) + let isMounted = true + let retryTimeoutId: NodeJS.Timeout | null = null + + const fetchPaymentLock = async () => { + try { + const attemptNumber = mantecaRetryCount.current + + if (isMounted) { + setLoadingState('Fetching details') + } + + if (attemptNumber > 0) { + console.log(`Payment lock fetch - retry attempt ${attemptNumber}/${MAX_RETRIES}`) + } + + const pl = await mantecaApi.initiateQrPayment({ qrCode }) + + // Reset retry count before checking mount status + // Prevents stale retry count if component unmounts during successful fetch + mantecaRetryCount.current = 0 + + // Only update state if component is still mounted + // Prevents state updates on unmounted components and duplicate payment locks + if (!isMounted) { + console.log('Payment lock fetch completed but component unmounted - ignoring result') + return + } + setWaitingForMerchantAmount(false) setPaymentLock(pl) - }) - .catch((error) => { + setLoadingState('Idle') + } catch (error: any) { + if (!isMounted) { + console.log('Payment lock fetch failed but component unmounted - ignoring error') + return + } + + // Provider-specific errors: don't retry if (error.message.includes("provider can't decode it")) { + mantecaRetryCount.current = 0 + setShouldRetry(false) + setLoadingState('Idle') + if (EQrType.PIX === qrType) { setErrorInitiatingPayment( 'We are currently experiencing issues with PIX payments due to an external provider. We are working to fix it as soon as possible' @@ -465,12 +505,46 @@ export default function QRPayPage() { } else { setWaitingForMerchantAmount(true) } + return + } + + // Network/timeout errors: retry with exponential backoff + if (mantecaRetryCount.current < MAX_RETRIES) { + mantecaRetryCount.current++ + const delayMs = Math.min(1000 * 2 ** (mantecaRetryCount.current - 1), 2000) // 1s, 2s + + console.log( + `Payment lock fetch failed, retrying in ${delayMs}ms... (attempt ${mantecaRetryCount.current}/${MAX_RETRIES})` + ) + + retryTimeoutId = setTimeout(() => { + if (isMounted) { + fetchPaymentLock() + } + }, delayMs) } else { - setErrorInitiatingPayment(error.message) + // All retries exhausted + mantecaRetryCount.current = 0 + setShouldRetry(false) + setLoadingState('Idle') + setErrorInitiatingPayment( + error.message || 'Failed to load payment details. Please check your connection and try again.' + ) setWaitingForMerchantAmount(false) } - }) - .finally(() => setLoadingState('Idle')) + } + } + + setShouldRetry(false) + fetchPaymentLock() + + // Cleanup: prevent state updates after unmount and cancel pending retries + return () => { + isMounted = false + if (retryTimeoutId) { + clearTimeout(retryTimeoutId) + } + } }, [paymentLock, qrCode, setLoadingState, paymentProcessor, shouldRetry, qrType]) const merchantName = useMemo(() => { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a62095b59..504610530 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -69,6 +69,17 @@ export default function RootLayout({ children }: { children: React.ReactNode }) + + {/* NETWORK RESILIENCE: Optimize critical path resource loading */} + {/* Preload: Forces high-priority download during initial page load */} + + + {/* Prefetch: Hints to browser to download during idle time for faster subsequent navigation */} + + + {/* DNS prefetch: Resolves DNS for external domains early to reduce latency on first API call */} + + {/* Note: Google Tag Manager (gtag.js) does not support version pinning.*/} {process.env.NODE_ENV !== 'development' && process.env.NEXT_PUBLIC_GA_KEY && ( <> diff --git a/src/app/sw.ts b/src/app/sw.ts index 22a34cf60..886b706e8 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -1,6 +1,12 @@ -import { defaultCache } from '@serwist/next/worker' import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist' -import { Serwist } from 'serwist' +import { + Serwist, + NetworkFirst, + StaleWhileRevalidate, + CacheFirst, + CacheableResponsePlugin, + ExpirationPlugin, +} from 'serwist' // This declares the value of `injectionPoint` to TypeScript. // `injectionPoint` is the string that will be replaced by the @@ -10,18 +16,159 @@ declare global { interface WorkerGlobalScope extends SerwistGlobalConfig { __SW_MANIFEST: (PrecacheEntry | string)[] | undefined } + // Next.js replaces process.env.NEXT_PUBLIC_* at build time + const process: { + env: { + NEXT_PUBLIC_PEANUT_API_URL?: string + } + } } // @ts-ignore declare const self: ServiceWorkerGlobalScope +// Cache version for invalidation on deploy +// Increment this to force cache refresh on all clients +const CACHE_VERSION = 'v1' + +// Extract API hostname from build-time environment variable +// Next.js replaces NEXT_PUBLIC_* variables at build time, so this works in all environments +// Supports dev (localhost), staging, and production without hardcoding +const API_URL = process.env.NEXT_PUBLIC_PEANUT_API_URL || 'https://api.peanut.me' +const API_HOSTNAME = new URL(API_URL).hostname + +/** + * Matches API requests to the configured API hostname + * Ensures caching works consistently across dev, staging, and production + */ +const isApiRequest = (url: URL): boolean => { + return url.hostname === API_HOSTNAME +} + +// NATIVE PWA: Custom caching strategies for API endpoints +// JWT token is in httpOnly cookies, so it's automatically sent with fetch requests const serwist = new Serwist({ precacheEntries: self.__SW_MANIFEST, skipWaiting: true, clientsClaim: true, navigationPreload: true, - runtimeCaching: defaultCache, disableDevLogs: false, + runtimeCaching: [ + // User data: Network-first with 3s timeout + // Prefers fresh data but falls back to cache if network is slow + // Prevents UI hanging on poor connections while keeping data reasonably fresh + { + matcher: ({ url }) => + isApiRequest(url) && + (url.pathname.includes('/api/user') || + url.pathname.includes('/api/profile') || + url.pathname.includes('/user/')), + handler: new NetworkFirst({ + cacheName: `user-api-${CACHE_VERSION}`, + networkTimeoutSeconds: 3, + plugins: [ + new CacheableResponsePlugin({ + statuses: [200], + }), + new ExpirationPlugin({ + maxAgeSeconds: 60 * 10, // 10 min + maxEntries: 20, + }), + ], + }), + }, + + // Prices: Stale-while-revalidate + // Serves cached prices instantly while updating in background + // Ideal for frequently changing data where slight staleness is acceptable + { + matcher: ({ url }) => + isApiRequest(url) && + (url.pathname.includes('/manteca/prices') || + url.pathname.includes('/token-price') || + url.pathname.includes('/fiat-prices')), + handler: new StaleWhileRevalidate({ + cacheName: `prices-api-${CACHE_VERSION}`, + plugins: [ + new CacheableResponsePlugin({ + statuses: [200], + }), + new ExpirationPlugin({ + maxAgeSeconds: 60, // 1 min + maxEntries: 50, + }), + ], + }), + }, + + // Transaction history: Network-first with 5s timeout + // Prefers fresh history but accepts cached data if network is slow + // History changes infrequently, so cache staleness is acceptable + { + matcher: ({ url }) => + isApiRequest(url) && + (url.pathname.includes('/api/transactions') || + url.pathname.includes('/manteca/transactions') || + url.pathname.includes('/history')), + handler: new NetworkFirst({ + cacheName: `transactions-api-${CACHE_VERSION}`, + networkTimeoutSeconds: 5, + plugins: [ + new CacheableResponsePlugin({ + statuses: [200], + }), + new ExpirationPlugin({ + maxAgeSeconds: 60 * 5, // 5 min + maxEntries: 30, + }), + ], + }), + }, + + // KYC/Merchant data: Network-first with 5s timeout + // Note: /manteca/qr-payment/init is intentionally excluded - it creates payment locks + // and must always fetch fresh data to prevent duplicate locks or wrong merchant payments + { + matcher: ({ url }) => + isApiRequest(url) && (url.pathname.includes('/kyc') || url.pathname.includes('/merchant')), + handler: new NetworkFirst({ + cacheName: `kyc-merchant-api-${CACHE_VERSION}`, + networkTimeoutSeconds: 5, + plugins: [ + new CacheableResponsePlugin({ + statuses: [200], + }), + new ExpirationPlugin({ + maxAgeSeconds: 60 * 5, // 5 min + maxEntries: 20, + }), + ], + }), + }, + + // External images: Cache-first + // Serves from cache immediately, updates in background + // Images are immutable, so cache-first provides best performance + { + matcher: ({ url }) => + url.origin === 'https://flagcdn.com' || + url.origin === 'https://cdn.peanut.to' || + url.origin === 'https://cdn.peanut.me' || + (url.pathname.match(/\.(png|jpg|jpeg|svg|webp|gif)$/) && url.origin !== self.location.origin), + handler: new CacheFirst({ + cacheName: `external-resources-${CACHE_VERSION}`, + plugins: [ + new CacheableResponsePlugin({ + statuses: [0, 200], + }), + new ExpirationPlugin({ + maxEntries: 100, + maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week + }), + ], + }), + }, + ], }) self.addEventListener('push', (event) => { @@ -55,4 +202,119 @@ self.addEventListener('notificationclick', (event) => { ) }) +// Cache cleanup on service worker activation +// Removes old cache versions when SW updates to prevent storage bloat +self.addEventListener('activate', (event) => { + event.waitUntil( + (async () => { + try { + const cacheNames = await caches.keys() + const currentCaches = [ + `user-api-${CACHE_VERSION}`, + `prices-api-${CACHE_VERSION}`, + `transactions-api-${CACHE_VERSION}`, + `kyc-merchant-api-${CACHE_VERSION}`, + `external-resources-${CACHE_VERSION}`, + ] + + // Delete old cache versions (not current caches, not precache) + await Promise.all( + cacheNames + .filter((name) => !currentCaches.includes(name) && !name.startsWith('serwist-precache')) + .map((name) => { + console.log('Deleting old cache:', name) + return caches.delete(name) + }) + ) + + console.log('Service Worker activated with cache version:', CACHE_VERSION) + } catch (error) { + console.error('Cache cleanup failed:', error) + + // Handle quota exceeded error (common on iOS with limited storage) + // Only clear API caches to preserve app shell (precache) for better UX + if (error instanceof Error && error.name === 'QuotaExceededError') { + console.error('Quota exceeded - clearing API caches only, preserving app shell') + const allCaches = await caches.keys() + const apiCachePatterns = [ + 'user-api', + 'prices-api', + 'transactions-api', + 'kyc-merchant-api', + 'external-resources', + ] + + await Promise.all( + allCaches + .filter((name) => apiCachePatterns.some((pattern) => name.includes(pattern))) + .map((name) => { + console.log('Clearing API cache due to quota:', name) + return caches.delete(name) + }) + ) + // Precache (app shell) is preserved for faster subsequent loads + } + } + })() + ) +}) + +// Message handler for client communication +// Handles SW control messages and cache statistics queries +self.addEventListener('message', (event) => { + // Skip waiting: Immediately activate new SW version + if (event.data && event.data.type === 'SKIP_WAITING') { + self.skipWaiting() + } + + // Android back button: Navigate back in PWA + if (event.data && event.data.type === 'NAVIGATE_BACK') { + event.waitUntil( + self.clients.matchAll({ type: 'window' }).then((clients) => { + clients.forEach((client) => { + client.postMessage({ type: 'NAVIGATE_BACK' }) + }) + }) + ) + } + + // Cache statistics: Returns cache sizes and storage estimates + // Requires MessageChannel for response (ports[0] must exist) + if (event.data && event.data.type === 'GET_CACHE_STATS') { + if (!event.ports || !event.ports[0]) { + console.error('GET_CACHE_STATS requires MessageChannel but none provided') + return + } + + event.waitUntil( + (async () => { + try { + const cacheNames = await caches.keys() + const stats: { [key: string]: number } = {} + + for (const name of cacheNames) { + const cache = await caches.open(name) + const keys = await cache.keys() + stats[name] = keys.length + } + + // Also get storage estimate if available + let storageEstimate: StorageEstimate | null = null + if ('storage' in navigator && 'estimate' in navigator.storage) { + storageEstimate = await navigator.storage.estimate() + } + + event.ports[0].postMessage({ + cacheStats: stats, + storageEstimate, + }) + } catch (error) { + console.error('Failed to get cache stats:', error) + event.ports[0].postMessage({ error: 'Failed to get cache stats' }) + } + })() + ) + } +}) + serwist.addEventListeners() diff --git a/src/components/Claim/useClaimLink.tsx b/src/components/Claim/useClaimLink.tsx index f0074684e..5e60aeb86 100644 --- a/src/components/Claim/useClaimLink.tsx +++ b/src/components/Claim/useClaimLink.tsx @@ -267,6 +267,10 @@ const useClaimLink = () => { */ const claimLinkMutation = useMutation({ mutationKey: [CLAIM_LINK], + // Disable retry for financial transactions to prevent duplicate claims + // Link claims transfer funds and are not idempotent at the mutation level + // If a claim succeeds but times out, retrying would create a duplicate claim + retry: false, mutationFn: async ({ address, link, @@ -312,6 +316,10 @@ const useClaimLink = () => { */ const claimLinkXChainMutation = useMutation({ mutationKey: [CLAIM_LINK_XCHAIN], + // Disable retry for financial transactions to prevent duplicate claims + // X-chain claims transfer funds and are not idempotent at the mutation level + // If a claim succeeds but times out, retrying would create a duplicate claim + retry: false, mutationFn: async ({ address, link, diff --git a/src/components/Global/DirectSendQR/index.tsx b/src/components/Global/DirectSendQR/index.tsx index fb6ddf230..815483875 100644 --- a/src/components/Global/DirectSendQR/index.tsx +++ b/src/components/Global/DirectSendQR/index.tsx @@ -5,7 +5,12 @@ import Checkbox from '@/components/0_Bruddle/Checkbox' import { useToast } from '@/components/0_Bruddle/Toast' import Modal from '@/components/Global/Modal' import QRBottomDrawer from '@/components/Global/QRBottomDrawer' -import QRScanner from '@/components/Global/QRScanner' +import PeanutLoading from '@/components/Global/PeanutLoading' +// Lazy load QR scanner to reduce initial bundle size (~50KB with jsQR library) +// Wrapped in error boundary to gracefully handle chunk load failures +import { lazy, Suspense } from 'react' +const QRScanner = lazy(() => import('@/components/Global/QRScanner')) +import LazyLoadErrorBoundary from '@/components/Global/LazyLoadErrorBoundary' import { useAuth } from '@/context/authContext' import { usePush } from '@/context/pushProvider' import { useAppDispatch } from '@/redux/hooks' @@ -498,7 +503,17 @@ export default function DirectSendQr({ {isQRScannerOpen && ( <> - setIsQRScannerOpen(false)} isOpen={true} /> + +
Failed to load QR scanner. Please refresh the page.
+
+ } + > + }> + setIsQRScannerOpen(false)} isOpen={true} /> + + void +} + +interface LazyLoadErrorBoundaryState { + hasError: boolean + error: Error | null +} + +/** + * Error Boundary for lazy-loaded components + * Catches chunk loading failures (network errors, 404s, timeouts) and provides + * graceful fallback instead of crashing the entire app + */ +class LazyLoadErrorBoundary extends React.Component { + constructor(props: LazyLoadErrorBoundaryProps) { + super(props) + this.state = { hasError: false, error: null } + } + + static getDerivedStateFromError(error: Error): LazyLoadErrorBoundaryState { + return { hasError: true, error } + } + + componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { + console.error('LazyLoad Error Boundary caught error:', error, errorInfo) + this.props.onError?.(error) + } + + render() { + if (this.state.hasError) { + // Use custom fallback if provided, otherwise render null (graceful degradation) + return this.props.fallback ?? null + } + + return this.props.children + } +} + +export default LazyLoadErrorBoundary diff --git a/src/components/TransactionDetails/TransactionCard.tsx b/src/components/TransactionDetails/TransactionCard.tsx index 2f83a8daf..8815c24ea 100644 --- a/src/components/TransactionDetails/TransactionCard.tsx +++ b/src/components/TransactionDetails/TransactionCard.tsx @@ -1,7 +1,6 @@ import Card, { type CardPosition } from '@/components/Global/Card' import { Icon, type IconName } from '@/components/Global/Icons/Icon' import TransactionAvatarBadge from '@/components/TransactionDetails/TransactionAvatarBadge' -import { TransactionDetailsDrawer } from '@/components/TransactionDetails/TransactionDetailsDrawer' import { type TransactionDirection } from '@/components/TransactionDetails/TransactionDetailsHeaderCard' import { type TransactionDetails } from '@/components/TransactionDetails/transactionTransformer' import { useTransactionDetailsDrawer } from '@/hooks/useTransactionDetailsDrawer' @@ -14,7 +13,7 @@ import { isStableCoin, shortenStringLong, } from '@/utils' -import React from 'react' +import React, { lazy, Suspense } from 'react' import Image from 'next/image' import StatusPill, { type StatusPillType } from '../Global/StatusPill' import { VerifiedUserLabel } from '../UserHeader' @@ -23,6 +22,16 @@ import { EHistoryEntryType } from '@/utils/history.utils' import { PerkIcon } from './PerkIcon' import { useHaptic } from 'use-haptic' +// Lazy load transaction details drawer (~40KB) to reduce initial bundle size +// Only loaded when user taps a transaction to view details +// Wrapped in error boundary to gracefully handle chunk load failures +const TransactionDetailsDrawer = lazy(() => + import('@/components/TransactionDetails/TransactionDetailsDrawer').then((mod) => ({ + default: mod.TransactionDetailsDrawer, + })) +) +import LazyLoadErrorBoundary from '@/components/Global/LazyLoadErrorBoundary' + export type TransactionType = | 'send' | 'withdraw' @@ -175,13 +184,17 @@ const TransactionCard: React.FC = ({ {/* Transaction Details Drawer */} - + + + + + ) } diff --git a/src/config/wagmi.config.tsx b/src/config/wagmi.config.tsx index d98b041cc..4a86b1ca5 100644 --- a/src/config/wagmi.config.tsx +++ b/src/config/wagmi.config.tsx @@ -20,8 +20,27 @@ import { createAppKit } from '@reown/appkit/react' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { WagmiProvider, cookieToInitialState, type Config } from 'wagmi' -// 0. Setup queryClient -const queryClient = new QueryClient() +// 0. Setup queryClient with network resilience defaults +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + // NETWORK RESILIENCE: Retry configuration for improved reliability + retry: 2, // Total 3 attempts: immediate + 2 retries + retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 5000), // Exponential backoff: 1s, 2s, 5s max + staleTime: 30 * 1000, // Cache data as fresh for 30s + gcTime: 5 * 60 * 1000, // Keep inactive queries in memory for 5min + refetchOnWindowFocus: true, // Refetch stale data when user returns + refetchOnReconnect: true, // Refetch when connectivity restored + networkMode: 'online', // Pause queries while offline + }, + mutations: { + // NETWORK RESILIENCE: Conservative retry for write operations + retry: 1, // Total 2 attempts: immediate + 1 retry + retryDelay: 1000, // Fixed 1s delay + networkMode: 'online', // Pause mutations while offline + }, + }, +}) // 1. Get projectId at https://cloud.reown.com const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID ?? '' diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx index e638d6d4a..059aa02b3 100644 --- a/src/context/authContext.tsx +++ b/src/context/authContext.tsx @@ -151,6 +151,28 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => { // clear JWT cookie by setting it to expire document.cookie = 'jwt-token=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;' + // Clear service worker caches to prevent user data leakage + // When User A logs out and User B logs in on the same device, cached API responses + // could expose User A's data (profile, transactions, KYC) to User B + // Only clears user-specific caches; preserves prices and external resources + if ('caches' in window) { + try { + const cacheNames = await caches.keys() + const userDataCachePatterns = ['user-api', 'transactions-api', 'kyc-merchant-api'] + await Promise.all( + cacheNames + .filter((name) => userDataCachePatterns.some((pattern) => name.includes(pattern))) + .map((name) => { + console.log('Logout: Clearing cache:', name) + return caches.delete(name) + }) + ) + } catch (error) { + console.error('Failed to clear caches on logout:', error) + // Non-fatal: logout continues even if cache clearing fails + } + } + // clear the iOS PWA prompt session flag if (typeof window !== 'undefined') { sessionStorage.removeItem('hasSeenIOSPWAPromptThisSession') diff --git a/src/context/kernelClient.context.tsx b/src/context/kernelClient.context.tsx index 52e415f3d..e6d75d4a6 100644 --- a/src/context/kernelClient.context.tsx +++ b/src/context/kernelClient.context.tsx @@ -190,30 +190,42 @@ export const KernelClientProvider = ({ children }: { children: ReactNode }) => { } const initializeClients = async () => { + // NETWORK RESILIENCE: Parallelize kernel client initialization across chains + // Currently only 1 chain configured (Arbitrum), but this enables future multi-chain support + const clientPromises = Object.entries(PUBLIC_CLIENTS_BY_CHAIN).map( + async ([chainId, { client, chain, bundlerUrl, paymasterUrl }]) => { + try { + const kernelClient = await createKernelClientForChain( + client, + chain, + isAfterZeroDevMigration, + webAuthnKey, + isAfterZeroDevMigration + ? undefined + : (user?.accounts.find((a) => a.type === 'peanut-wallet')!.identifier as Address), + { + bundlerUrl, + paymasterUrl, + } + ) + return { chainId, kernelClient, success: true } as const + } catch (error) { + console.error(`Error creating kernel client for chain ${chainId}:`, error) + captureException(error) + return { chainId, error, success: false } as const + } + } + ) + + const results = await Promise.allSettled(clientPromises) + const newClientsByChain: Record = {} - for (const chainId in PUBLIC_CLIENTS_BY_CHAIN) { - const { client, chain, bundlerUrl, paymasterUrl } = PUBLIC_CLIENTS_BY_CHAIN[chainId] - try { - const kernelClient = await createKernelClientForChain( - client, - chain, - isAfterZeroDevMigration, - webAuthnKey, - isAfterZeroDevMigration - ? undefined - : (user?.accounts.find((a) => a.type === 'peanut-wallet')!.identifier as Address), - { - bundlerUrl, - paymasterUrl, - } - ) - newClientsByChain[chainId] = kernelClient - } catch (error) { - console.error(`Error creating kernel client for chain ${chainId}:`, error) - captureException(error) - continue + for (const result of results) { + if (result.status === 'fulfilled' && result.value.success) { + newClientsByChain[result.value.chainId] = result.value.kernelClient } } + if (isMounted) { fetchUser() setClientsByChain(newClientsByChain) diff --git a/src/hooks/useNetworkStatus.ts b/src/hooks/useNetworkStatus.ts new file mode 100644 index 000000000..cfa7c6af8 --- /dev/null +++ b/src/hooks/useNetworkStatus.ts @@ -0,0 +1,41 @@ +import { useEffect, useState } from 'react' + +/** + * NETWORK RESILIENCE: Detects online/offline status using navigator.onLine + * + * ⚠️ LIMITATION: navigator.onLine has false positives (WiFi connected but no internet, + * captive portals, VPN/firewall issues). Use as UI hint only. TanStack Query's network + * detection tests actual connectivity and is more reliable for request retries. + * + * @returns isOnline - Current connection status per navigator.onLine + * @returns wasOffline - True for 3s after coming back online (useful for "restored" toast) + */ +export function useNetworkStatus() { + const [isOnline, setIsOnline] = useState(() => + typeof navigator !== 'undefined' ? navigator.onLine : true + ) + const [wasOffline, setWasOffline] = useState(false) + + useEffect(() => { + const handleOnline = () => { + setIsOnline(true) + setWasOffline(true) + setTimeout(() => setWasOffline(false), 3000) + } + + const handleOffline = () => { + setIsOnline(false) + setWasOffline(false) + } + + window.addEventListener('online', handleOnline) + window.addEventListener('offline', handleOffline) + + return () => { + window.removeEventListener('online', handleOnline) + window.removeEventListener('offline', handleOffline) + } + }, []) + + return { isOnline, wasOffline } +} diff --git a/src/hooks/wallet/useSendMoney.ts b/src/hooks/wallet/useSendMoney.ts index 1630bb94c..eb61c76af 100644 --- a/src/hooks/wallet/useSendMoney.ts +++ b/src/hooks/wallet/useSendMoney.ts @@ -40,6 +40,10 @@ export const useSendMoney = ({ address, handleSendUserOpEncoded }: UseSendMoneyO return useMutation({ mutationKey: [BALANCE_DECREASE, SEND_MONEY], + // Disable retry for financial transactions to prevent duplicate payments + // Blockchain transactions are not idempotent at the mutation level + // If a transaction succeeds but times out, retrying would create a duplicate payment + retry: false, mutationFn: async ({ toAddress, amountInUsd }: SendMoneyParams) => { const amountToSend = parseUnits(amountInUsd, PEANUT_WALLET_TOKEN_DECIMALS) From 1c9941b08e14ef8bbc8f4d789df39e78e2997b4a Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Wed, 12 Nov 2025 22:35:59 -0300 Subject: [PATCH 046/121] fix --- src/app/layout.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 504610530..402e17b74 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -70,10 +70,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - {/* NETWORK RESILIENCE: Optimize critical path resource loading */} - {/* Preload: Forces high-priority download during initial page load */} - - + {/* Optimize critical path resource loading */} {/* Prefetch: Hints to browser to download during idle time for faster subsequent navigation */} From 3c64538e5f071af027b0f721021d1a4e0cbd552a Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Wed, 12 Nov 2025 22:44:13 -0300 Subject: [PATCH 047/121] CR comments --- src/app/sw.ts | 42 ++++++++++++++++---------- src/config/wagmi.config.tsx | 8 ++--- src/constants/cache.consts.ts | 35 ++++++++++++++++++++++ src/context/authContext.tsx | 4 +-- src/hooks/useNetworkStatus.ts | 11 ++++++- src/utils/retry.utils.ts | 56 +++++++++++++++++++++++++++++++++++ 6 files changed, 133 insertions(+), 23 deletions(-) create mode 100644 src/constants/cache.consts.ts create mode 100644 src/utils/retry.utils.ts diff --git a/src/app/sw.ts b/src/app/sw.ts index 886b706e8..e89792a7c 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -8,6 +8,18 @@ import { ExpirationPlugin, } from 'serwist' +// Cache name constants (inline version for SW - can't use @ imports in service worker context) +// These match src/constants/cache.consts.ts to ensure consistency +const CACHE_NAMES = { + USER_API: 'user-api', + TRANSACTIONS: 'transactions-api', + KYC_MERCHANT: 'kyc-merchant-api', + PRICES: 'prices-api', + EXTERNAL_RESOURCES: 'external-resources', +} as const + +const getCacheNameWithVersion = (name: string, version: string): string => `${name}-${version}` + // This declares the value of `injectionPoint` to TypeScript. // `injectionPoint` is the string that will be replaced by the // actual precache manifest. By default, this string is set to @@ -64,7 +76,7 @@ const serwist = new Serwist({ url.pathname.includes('/api/profile') || url.pathname.includes('/user/')), handler: new NetworkFirst({ - cacheName: `user-api-${CACHE_VERSION}`, + cacheName: getCacheNameWithVersion(CACHE_NAMES.USER_API, CACHE_VERSION), networkTimeoutSeconds: 3, plugins: [ new CacheableResponsePlugin({ @@ -88,7 +100,7 @@ const serwist = new Serwist({ url.pathname.includes('/token-price') || url.pathname.includes('/fiat-prices')), handler: new StaleWhileRevalidate({ - cacheName: `prices-api-${CACHE_VERSION}`, + cacheName: getCacheNameWithVersion(CACHE_NAMES.PRICES, CACHE_VERSION), plugins: [ new CacheableResponsePlugin({ statuses: [200], @@ -111,7 +123,7 @@ const serwist = new Serwist({ url.pathname.includes('/manteca/transactions') || url.pathname.includes('/history')), handler: new NetworkFirst({ - cacheName: `transactions-api-${CACHE_VERSION}`, + cacheName: getCacheNameWithVersion(CACHE_NAMES.TRANSACTIONS, CACHE_VERSION), networkTimeoutSeconds: 5, plugins: [ new CacheableResponsePlugin({ @@ -132,7 +144,7 @@ const serwist = new Serwist({ matcher: ({ url }) => isApiRequest(url) && (url.pathname.includes('/kyc') || url.pathname.includes('/merchant')), handler: new NetworkFirst({ - cacheName: `kyc-merchant-api-${CACHE_VERSION}`, + cacheName: getCacheNameWithVersion(CACHE_NAMES.KYC_MERCHANT, CACHE_VERSION), networkTimeoutSeconds: 5, plugins: [ new CacheableResponsePlugin({ @@ -156,7 +168,7 @@ const serwist = new Serwist({ url.origin === 'https://cdn.peanut.me' || (url.pathname.match(/\.(png|jpg|jpeg|svg|webp|gif)$/) && url.origin !== self.location.origin), handler: new CacheFirst({ - cacheName: `external-resources-${CACHE_VERSION}`, + cacheName: getCacheNameWithVersion(CACHE_NAMES.EXTERNAL_RESOURCES, CACHE_VERSION), plugins: [ new CacheableResponsePlugin({ statuses: [0, 200], @@ -210,11 +222,11 @@ self.addEventListener('activate', (event) => { try { const cacheNames = await caches.keys() const currentCaches = [ - `user-api-${CACHE_VERSION}`, - `prices-api-${CACHE_VERSION}`, - `transactions-api-${CACHE_VERSION}`, - `kyc-merchant-api-${CACHE_VERSION}`, - `external-resources-${CACHE_VERSION}`, + getCacheNameWithVersion(CACHE_NAMES.USER_API, CACHE_VERSION), + getCacheNameWithVersion(CACHE_NAMES.PRICES, CACHE_VERSION), + getCacheNameWithVersion(CACHE_NAMES.TRANSACTIONS, CACHE_VERSION), + getCacheNameWithVersion(CACHE_NAMES.KYC_MERCHANT, CACHE_VERSION), + getCacheNameWithVersion(CACHE_NAMES.EXTERNAL_RESOURCES, CACHE_VERSION), ] // Delete old cache versions (not current caches, not precache) @@ -237,11 +249,11 @@ self.addEventListener('activate', (event) => { console.error('Quota exceeded - clearing API caches only, preserving app shell') const allCaches = await caches.keys() const apiCachePatterns = [ - 'user-api', - 'prices-api', - 'transactions-api', - 'kyc-merchant-api', - 'external-resources', + CACHE_NAMES.USER_API, + CACHE_NAMES.PRICES, + CACHE_NAMES.TRANSACTIONS, + CACHE_NAMES.KYC_MERCHANT, + CACHE_NAMES.EXTERNAL_RESOURCES, ] await Promise.all( diff --git a/src/config/wagmi.config.tsx b/src/config/wagmi.config.tsx index 4a86b1ca5..0a4f1643a 100644 --- a/src/config/wagmi.config.tsx +++ b/src/config/wagmi.config.tsx @@ -19,14 +19,13 @@ import { import { createAppKit } from '@reown/appkit/react' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { WagmiProvider, cookieToInitialState, type Config } from 'wagmi' +import { RETRY_STRATEGIES } from '@/utils/retry.utils' // 0. Setup queryClient with network resilience defaults const queryClient = new QueryClient({ defaultOptions: { queries: { - // NETWORK RESILIENCE: Retry configuration for improved reliability - retry: 2, // Total 3 attempts: immediate + 2 retries - retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 5000), // Exponential backoff: 1s, 2s, 5s max + ...RETRY_STRATEGIES.FAST, staleTime: 30 * 1000, // Cache data as fresh for 30s gcTime: 5 * 60 * 1000, // Keep inactive queries in memory for 5min refetchOnWindowFocus: true, // Refetch stale data when user returns @@ -34,8 +33,7 @@ const queryClient = new QueryClient({ networkMode: 'online', // Pause queries while offline }, mutations: { - // NETWORK RESILIENCE: Conservative retry for write operations - retry: 1, // Total 2 attempts: immediate + 1 retry + retry: 1, // Total 2 attempts: immediate + 1 retry (conservative for write operations) retryDelay: 1000, // Fixed 1s delay networkMode: 'online', // Pause mutations while offline }, diff --git a/src/constants/cache.consts.ts b/src/constants/cache.consts.ts new file mode 100644 index 000000000..5583b26fb --- /dev/null +++ b/src/constants/cache.consts.ts @@ -0,0 +1,35 @@ +/** + * Service Worker cache name constants + * Used across sw.ts and authContext.tsx to ensure consistent cache management + */ + +/** + * Base cache names (without version suffix) + */ +export const CACHE_NAMES = { + USER_API: 'user-api', + TRANSACTIONS: 'transactions-api', + KYC_MERCHANT: 'kyc-merchant-api', + PRICES: 'prices-api', + EXTERNAL_RESOURCES: 'external-resources', +} as const + +/** + * Cache names that contain user-specific data + * These should be cleared on logout to prevent data leakage between users + */ +export const USER_DATA_CACHE_PATTERNS = [ + CACHE_NAMES.USER_API, + CACHE_NAMES.TRANSACTIONS, + CACHE_NAMES.KYC_MERCHANT, +] as const + +/** + * Generates a versioned cache name + * @param name - Base cache name + * @param version - Cache version string + * @returns Versioned cache name (e.g., "user-api-v1") + */ +export const getCacheNameWithVersion = (name: string, version: string): string => { + return `${name}-${version}` +} diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx index 059aa02b3..556d4a011 100644 --- a/src/context/authContext.tsx +++ b/src/context/authContext.tsx @@ -17,6 +17,7 @@ import { useRouter, usePathname } from 'next/navigation' import { createContext, type ReactNode, useContext, useState, useEffect, useMemo, useCallback } from 'react' import { captureException } from '@sentry/nextjs' import { PUBLIC_ROUTES_REGEX } from '@/constants/routes' +import { USER_DATA_CACHE_PATTERNS } from '@/constants/cache.consts' interface AuthContextType { user: interfaces.IUserProfile | null @@ -158,10 +159,9 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => { if ('caches' in window) { try { const cacheNames = await caches.keys() - const userDataCachePatterns = ['user-api', 'transactions-api', 'kyc-merchant-api'] await Promise.all( cacheNames - .filter((name) => userDataCachePatterns.some((pattern) => name.includes(pattern))) + .filter((name) => USER_DATA_CACHE_PATTERNS.some((pattern) => name.includes(pattern))) .map((name) => { console.log('Logout: Clearing cache:', name) return caches.delete(name) diff --git a/src/hooks/useNetworkStatus.ts b/src/hooks/useNetworkStatus.ts index cfa7c6af8..32c90c56a 100644 --- a/src/hooks/useNetworkStatus.ts +++ b/src/hooks/useNetworkStatus.ts @@ -17,15 +17,21 @@ export function useNetworkStatus() { const [wasOffline, setWasOffline] = useState(false) useEffect(() => { + let timeoutId: ReturnType | null = null + const handleOnline = () => { setIsOnline(true) setWasOffline(true) - setTimeout(() => setWasOffline(false), 3000) + timeoutId = setTimeout(() => setWasOffline(false), 3000) } const handleOffline = () => { setIsOnline(false) setWasOffline(false) + if (timeoutId) { + clearTimeout(timeoutId) + timeoutId = null + } } window.addEventListener('online', handleOnline) @@ -34,6 +40,9 @@ export function useNetworkStatus() { return () => { window.removeEventListener('online', handleOnline) window.removeEventListener('offline', handleOffline) + if (timeoutId) { + clearTimeout(timeoutId) + } } }, []) diff --git a/src/utils/retry.utils.ts b/src/utils/retry.utils.ts new file mode 100644 index 000000000..fb9fd8309 --- /dev/null +++ b/src/utils/retry.utils.ts @@ -0,0 +1,56 @@ +/** + * Shared retry utilities for network resilience + * Provides consistent retry strategies across the application + */ + +/** + * Creates an exponential backoff function + * Delays increase exponentially: baseDelay, baseDelay*2, baseDelay*4, etc., up to maxDelay + * + * @param baseDelay - Initial delay in milliseconds (default: 1000ms) + * @param maxDelay - Maximum delay in milliseconds (default: 5000ms) + * @returns Function that calculates delay for a given attempt index + */ +export const createExponentialBackoff = (baseDelay: number = 1000, maxDelay: number = 5000) => { + return (attemptIndex: number) => Math.min(baseDelay * 2 ** attemptIndex, maxDelay) +} + +/** + * Predefined retry strategies for different use cases + */ +export const RETRY_STRATEGIES = { + /** + * Fast retry: 2 retries with exponential backoff (1s, 2s, max 5s) + * Use for: User-facing queries that need quick feedback + */ + FAST: { + retry: 2, + retryDelay: createExponentialBackoff(1000, 5000), + }, + + /** + * Standard retry: 3 retries with exponential backoff (1s, 2s, 4s, max 30s) + * Use for: Background queries, non-critical data + */ + STANDARD: { + retry: 3, + retryDelay: createExponentialBackoff(1000, 30000), + }, + + /** + * Aggressive retry: 4 retries with exponential backoff (1s, 2s, 4s, 8s, max 10s) + * Use for: Critical data that must succeed + */ + AGGRESSIVE: { + retry: 4, + retryDelay: createExponentialBackoff(1000, 10000), + }, + + /** + * No retry: Financial transactions must not be retried automatically + * Use for: Payments, withdrawals, claims - any operation that transfers funds + */ + FINANCIAL: { + retry: false, + }, +} as const From 80350e8a29c6091802d40677cfc30f8c18ee94ea Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Wed, 12 Nov 2025 22:54:48 -0300 Subject: [PATCH 048/121] cr comments --- src/app/sw.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/app/sw.ts b/src/app/sw.ts index e89792a7c..c908f29c6 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -29,9 +29,12 @@ declare global { __SW_MANIFEST: (PrecacheEntry | string)[] | undefined } // Next.js replaces process.env.NEXT_PUBLIC_* at build time + // Vercel automatically injects NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA const process: { env: { NEXT_PUBLIC_PEANUT_API_URL?: string + NEXT_PUBLIC_GIT_COMMIT_HASH?: string + NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA?: string } } } @@ -39,9 +42,13 @@ declare global { // @ts-ignore declare const self: ServiceWorkerGlobalScope -// Cache version for invalidation on deploy -// Increment this to force cache refresh on all clients -const CACHE_VERSION = 'v1' +// Cache version derived from build - automatically invalidates on deploy +// Uses git commit hash from next.config.js (available in Vercel builds) +// Falls back to timestamp in dev/local builds where git might not be available +const CACHE_VERSION = + process.env.NEXT_PUBLIC_GIT_COMMIT_HASH && process.env.NEXT_PUBLIC_GIT_COMMIT_HASH !== 'unknown' + ? process.env.NEXT_PUBLIC_GIT_COMMIT_HASH + : `dev-${Date.now()}` // Extract API hostname from build-time environment variable // Next.js replaces NEXT_PUBLIC_* variables at build time, so this works in all environments @@ -243,8 +250,8 @@ self.addEventListener('activate', (event) => { } catch (error) { console.error('Cache cleanup failed:', error) - // Handle quota exceeded error (common on iOS with limited storage) - // Only clear API caches to preserve app shell (precache) for better UX + // Handle quota exceeded error (can occur on any platform when storage is full) + // Clear only API caches to preserve app shell (precache) for faster reload if (error instanceof Error && error.name === 'QuotaExceededError') { console.error('Quota exceeded - clearing API caches only, preserving app shell') const allCaches = await caches.keys() From 755f0c3ca8fe9e07e78a30cf65057d953d0c64cf Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Wed, 12 Nov 2025 22:59:59 -0300 Subject: [PATCH 049/121] don't invalidate cache on each deploy --- src/app/sw.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/app/sw.ts b/src/app/sw.ts index c908f29c6..ae0387fc4 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -29,12 +29,10 @@ declare global { __SW_MANIFEST: (PrecacheEntry | string)[] | undefined } // Next.js replaces process.env.NEXT_PUBLIC_* at build time - // Vercel automatically injects NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA const process: { env: { NEXT_PUBLIC_PEANUT_API_URL?: string - NEXT_PUBLIC_GIT_COMMIT_HASH?: string - NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA?: string + NEXT_PUBLIC_API_VERSION?: string } } } @@ -42,13 +40,14 @@ declare global { // @ts-ignore declare const self: ServiceWorkerGlobalScope -// Cache version derived from build - automatically invalidates on deploy -// Uses git commit hash from next.config.js (available in Vercel builds) -// Falls back to timestamp in dev/local builds where git might not be available -const CACHE_VERSION = - process.env.NEXT_PUBLIC_GIT_COMMIT_HASH && process.env.NEXT_PUBLIC_GIT_COMMIT_HASH !== 'unknown' - ? process.env.NEXT_PUBLIC_GIT_COMMIT_HASH - : `dev-${Date.now()}` +// Cache version tied to API version - automatic invalidation on breaking changes +// Uses NEXT_PUBLIC_API_VERSION (set in Vercel env vars or .env) +// Increment NEXT_PUBLIC_API_VERSION only when: +// - API response structure changes (breaking changes) +// - Cache strategy changes (e.g., switching from NetworkFirst to CacheFirst) +// Most deploys: API_VERSION stays the same → cache preserved (fast repeat visits) +// Breaking changes: Bump API_VERSION (v1→v2) → cache auto-invalidates across all users +const CACHE_VERSION = process.env.NEXT_PUBLIC_API_VERSION || 'v1' // Extract API hostname from build-time environment variable // Next.js replaces NEXT_PUBLIC_* variables at build time, so this works in all environments From 13c664ad7f72963e5174f623d4e697155ec45db5 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 13:47:38 -0300 Subject: [PATCH 050/121] fixes after testing --- src/app/sw.ts | 80 +++++++++++++++++--- src/components/Global/DirectSendQR/index.tsx | 29 +++++-- src/config/wagmi.config.tsx | 6 +- src/hooks/useTransactionHistory.ts | 9 ++- src/hooks/wallet/useBalance.ts | 25 +++++- 5 files changed, 121 insertions(+), 28 deletions(-) diff --git a/src/app/sw.ts b/src/app/sw.ts index ae0387fc4..83d855b78 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -16,10 +16,36 @@ const CACHE_NAMES = { KYC_MERCHANT: 'kyc-merchant-api', PRICES: 'prices-api', EXTERNAL_RESOURCES: 'external-resources', + RPC: 'rpc-api', } as const const getCacheNameWithVersion = (name: string, version: string): string => `${name}-${version}` +// RPC provider hostnames for Service Worker caching +// ⚠️ DUPLICATION NOTE: This list mirrors rpcUrls in src/constants/general.consts.ts +// Service Workers run in a separate context and cannot use @ imports or module imports +// They only have access to build-time environment variables (NEXT_PUBLIC_*) +// +// When adding a new RPC provider: +// 1. Add full URL to rpcUrls in src/constants/general.consts.ts +// 2. Extract hostname and add to this RPC_HOSTNAMES array +// +// Example: If adding 'https://new-provider.com/rpc' to rpcUrls: +// → Add 'new-provider.com' to RPC_HOSTNAMES below +const RPC_HOSTNAMES = [ + 'alchemy.com', + 'infura.io', + 'chainstack.com', + 'arbitrum.io', + 'publicnode.com', + 'ankr.com', + 'polygon-rpc.com', + 'optimism.io', + 'base.org', + 'bnbchain.org', + 'public-rpc.com', +] as const + // This declares the value of `injectionPoint` to TypeScript. // `injectionPoint` is the string that will be replaced by the // actual precache manifest. By default, this string is set to @@ -72,24 +98,25 @@ const serwist = new Serwist({ navigationPreload: true, disableDevLogs: false, runtimeCaching: [ - // User data: Network-first with 3s timeout - // Prefers fresh data but falls back to cache if network is slow - // Prevents UI hanging on poor connections while keeping data reasonably fresh + // User data: Stale-while-revalidate for instant load with background refresh + // Serves cached data instantly (even if days old), updates in background + // Critical for fast app startup - user sees profile/username/balance immediately + // Fresh data always loads in background (1-2s) and updates UI when ready + // 1 week cache enables instant loads even after extended offline periods { matcher: ({ url }) => isApiRequest(url) && (url.pathname.includes('/api/user') || url.pathname.includes('/api/profile') || url.pathname.includes('/user/')), - handler: new NetworkFirst({ + handler: new StaleWhileRevalidate({ cacheName: getCacheNameWithVersion(CACHE_NAMES.USER_API, CACHE_VERSION), - networkTimeoutSeconds: 3, plugins: [ new CacheableResponsePlugin({ statuses: [200], }), new ExpirationPlugin({ - maxAgeSeconds: 60 * 10, // 10 min + maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week (instant load anytime) maxEntries: 20, }), ], @@ -119,24 +146,25 @@ const serwist = new Serwist({ }), }, - // Transaction history: Network-first with 5s timeout - // Prefers fresh history but accepts cached data if network is slow - // History changes infrequently, so cache staleness is acceptable + // Transaction history: Stale-while-revalidate for instant load + // Serves cached history instantly (even if days old), updates in background + // History is append-only, so showing cached data first is always safe + // Fresh transactions always load in background (1-2s) and appear when ready + // 1 week cache enables instant activity view even after extended offline periods { matcher: ({ url }) => isApiRequest(url) && (url.pathname.includes('/api/transactions') || url.pathname.includes('/manteca/transactions') || url.pathname.includes('/history')), - handler: new NetworkFirst({ + handler: new StaleWhileRevalidate({ cacheName: getCacheNameWithVersion(CACHE_NAMES.TRANSACTIONS, CACHE_VERSION), - networkTimeoutSeconds: 5, plugins: [ new CacheableResponsePlugin({ statuses: [200], }), new ExpirationPlugin({ - maxAgeSeconds: 60 * 5, // 5 min + maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week (instant load anytime) maxEntries: 30, }), ], @@ -186,6 +214,32 @@ const serwist = new Serwist({ ], }), }, + + // Blockchain RPC calls: Stale-while-revalidate for instant balance/blockchain data + // Caches eth_call, balanceOf, and other read-only RPC responses + // Critical for instant balance display on home screen + // + // ⚠️ Cache TTL considerations: + // - Balance CAN change frequently (user makes payment, receives money) + // - 5min cache balances instant load vs. stale data risk + // - StaleWhileRevalidate ensures fresh data loads in background (1-2s) + // - User sees cached balance instantly, then it updates when fresh data arrives + { + matcher: ({ url, request }) => + request.method === 'POST' && RPC_HOSTNAMES.some((hostname) => url.hostname.includes(hostname)), + handler: new StaleWhileRevalidate({ + cacheName: getCacheNameWithVersion(CACHE_NAMES.RPC, CACHE_VERSION), + plugins: [ + new CacheableResponsePlugin({ + statuses: [200], + }), + new ExpirationPlugin({ + maxAgeSeconds: 60 * 5, // 5 min (balance can change from txs/payments) + maxEntries: 50, + }), + ], + }), + }, ], }) @@ -233,6 +287,7 @@ self.addEventListener('activate', (event) => { getCacheNameWithVersion(CACHE_NAMES.TRANSACTIONS, CACHE_VERSION), getCacheNameWithVersion(CACHE_NAMES.KYC_MERCHANT, CACHE_VERSION), getCacheNameWithVersion(CACHE_NAMES.EXTERNAL_RESOURCES, CACHE_VERSION), + getCacheNameWithVersion(CACHE_NAMES.RPC, CACHE_VERSION), ] // Delete old cache versions (not current caches, not precache) @@ -260,6 +315,7 @@ self.addEventListener('activate', (event) => { CACHE_NAMES.TRANSACTIONS, CACHE_NAMES.KYC_MERCHANT, CACHE_NAMES.EXTERNAL_RESOURCES, + CACHE_NAMES.RPC, ] await Promise.all( diff --git a/src/components/Global/DirectSendQR/index.tsx b/src/components/Global/DirectSendQR/index.tsx index 815483875..b2fc0187e 100644 --- a/src/components/Global/DirectSendQR/index.tsx +++ b/src/components/Global/DirectSendQR/index.tsx @@ -510,17 +510,30 @@ export default function DirectSendQr({
} > - }> + + + +
+ } + > setIsQRScannerOpen(false)} isOpen={true} /> + - )} diff --git a/src/config/wagmi.config.tsx b/src/config/wagmi.config.tsx index 0a4f1643a..639589c06 100644 --- a/src/config/wagmi.config.tsx +++ b/src/config/wagmi.config.tsx @@ -30,12 +30,14 @@ const queryClient = new QueryClient({ gcTime: 5 * 60 * 1000, // Keep inactive queries in memory for 5min refetchOnWindowFocus: true, // Refetch stale data when user returns refetchOnReconnect: true, // Refetch when connectivity restored - networkMode: 'online', // Pause queries while offline + // Allow queries when offline to read from TanStack Query in-memory cache + // Service Worker provides additional HTTP API response caching (user data, history, prices) + networkMode: 'always', // Run queries even when offline (reads from cache) }, mutations: { retry: 1, // Total 2 attempts: immediate + 1 retry (conservative for write operations) retryDelay: 1000, // Fixed 1s delay - networkMode: 'online', // Pause mutations while offline + networkMode: 'online', // Pause mutations while offline (writes require network) }, }, }) diff --git a/src/hooks/useTransactionHistory.ts b/src/hooks/useTransactionHistory.ts index cbb7689e0..332666629 100644 --- a/src/hooks/useTransactionHistory.ts +++ b/src/hooks/useTransactionHistory.ts @@ -83,6 +83,8 @@ export function useTransactionHistory({ } // Latest transactions mode (for home page) + // Cache-first strategy: TanStack refetches on every render, but SW returns + // cached data instantly (<50ms), then updates in background if (mode === 'latest') { // if filterMutualTxs is true, we need to add the username to the query key to invalidate the query when the username changes const queryKeyTxn = TRANSACTIONS + (filterMutualTxs ? username : '') @@ -90,17 +92,20 @@ export function useTransactionHistory({ queryKey: [queryKeyTxn, 'latest', { limit }], queryFn: () => fetchHistory({ limit }), enabled, - staleTime: 5 * 60 * 1000, // 5 minutes + staleTime: 0, // Always refetch to trigger SW cache-first + background update + gcTime: 5 * 60 * 1000, // Keep in memory for 5min }) } // Infinite query mode (for main history page) + // Uses longer staleTime since user is actively browsing (less critical for instant updates) return useInfiniteQuery({ queryKey: [TRANSACTIONS, 'infinite', { limit }], queryFn: ({ pageParam }) => fetchHistory({ cursor: pageParam, limit }), initialPageParam: undefined as string | undefined, getNextPageParam: (lastPage) => (lastPage.hasMore ? lastPage.cursor : undefined), enabled, - staleTime: 5 * 60 * 1000, // 5 minutes + staleTime: 30 * 1000, // 30 seconds (infinite scroll doesn't need instant updates) + gcTime: 5 * 60 * 1000, // Keep in memory for 5min }) } diff --git a/src/hooks/wallet/useBalance.ts b/src/hooks/wallet/useBalance.ts index 99f595aa8..1d23d7a10 100644 --- a/src/hooks/wallet/useBalance.ts +++ b/src/hooks/wallet/useBalance.ts @@ -6,12 +6,28 @@ import { PEANUT_WALLET_TOKEN, peanutPublicClient } from '@/constants' /** * Hook to fetch and auto-refresh wallet balance using TanStack Query * + * Cache-first strategy with background updates (instant load): + * 1. TanStack tries to fetch (staleTime: 0) + * 2. Service Worker intercepts RPC call with StaleWhileRevalidate + * 3. SW returns cached balance instantly (<50ms) + * 4. SW fetches fresh balance in background from blockchain RPC + * 5. UI updates seamlessly when fresh balance arrives + * + * Why staleTime: 0: + * - Always attempts refetch to trigger SW cache layer + * - SW returns cached data instantly (no waiting) + * - Fresh data loads in background and updates UI + * - Prevents excessive RPC calls (SW handles deduplication) + * + * Cache layers: + * - Service Worker: 5 minutes (balanceOf calls cached at HTTP level) + * - TanStack Query: In-memory for 5min (fast subsequent renders) + * * Features: + * - Instant cached response on repeat visits (<50ms) + * - Background refresh for accuracy * - Auto-refreshes every 30 seconds - * - Refetches when window regains focus - * - Refetches after network reconnection * - Built-in retry on failure - * - Caching and deduplication */ export const useBalance = (address: Address | undefined) => { return useQuery({ @@ -27,7 +43,8 @@ export const useBalance = (address: Address | undefined) => { return balance }, enabled: !!address, // Only run query if address exists - staleTime: 10 * 1000, // Consider data stale after 10 seconds + staleTime: 0, // Always refetch to trigger SW cache-first (instant) + background update + gcTime: 5 * 60 * 1000, // Keep in memory for 5min refetchInterval: 30 * 1000, // Auto-refresh every 30 seconds refetchOnWindowFocus: true, // Refresh when tab regains focus refetchOnReconnect: true, // Refresh after network reconnection From 96cd79368ac231f00f156465edc024c994dd9ca7 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 14:03:00 -0300 Subject: [PATCH 051/121] fixes --- src/app/sw.ts | 1 + src/components/Global/DirectSendQR/index.tsx | 34 ++++++++------------ src/context/kernelClient.context.tsx | 34 ++++++++++---------- src/hooks/wallet/useSendMoney.ts | 7 +++- 4 files changed, 37 insertions(+), 39 deletions(-) diff --git a/src/app/sw.ts b/src/app/sw.ts index 83d855b78..d2f005050 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -44,6 +44,7 @@ const RPC_HOSTNAMES = [ 'base.org', 'bnbchain.org', 'public-rpc.com', + 'scroll.io', ] as const // This declares the value of `injectionPoint` to TypeScript. diff --git a/src/components/Global/DirectSendQR/index.tsx b/src/components/Global/DirectSendQR/index.tsx index b2fc0187e..01474083e 100644 --- a/src/components/Global/DirectSendQR/index.tsx +++ b/src/components/Global/DirectSendQR/index.tsx @@ -510,30 +510,22 @@ export default function DirectSendQr({
} > - - - -
- } - > + }> setIsQRScannerOpen(false)} isOpen={true} /> - + {/* Render QRBottomDrawer once outside Suspense to prevent duplicate mounting + Wrapped in div with z-[60] to ensure drawer appears above QRScanner (z-50) + This allows "scan OR be scanned" dual functionality */} +
+ +
)} diff --git a/src/context/kernelClient.context.tsx b/src/context/kernelClient.context.tsx index e6d75d4a6..6a15e00a1 100644 --- a/src/context/kernelClient.context.tsx +++ b/src/context/kernelClient.context.tsx @@ -194,24 +194,24 @@ export const KernelClientProvider = ({ children }: { children: ReactNode }) => { // Currently only 1 chain configured (Arbitrum), but this enables future multi-chain support const clientPromises = Object.entries(PUBLIC_CLIENTS_BY_CHAIN).map( async ([chainId, { client, chain, bundlerUrl, paymasterUrl }]) => { - try { - const kernelClient = await createKernelClientForChain( - client, - chain, - isAfterZeroDevMigration, - webAuthnKey, - isAfterZeroDevMigration - ? undefined - : (user?.accounts.find((a) => a.type === 'peanut-wallet')!.identifier as Address), - { - bundlerUrl, - paymasterUrl, - } - ) + try { + const kernelClient = await createKernelClientForChain( + client, + chain, + isAfterZeroDevMigration, + webAuthnKey, + isAfterZeroDevMigration + ? undefined + : (user?.accounts.find((a) => a.type === 'peanut-wallet')!.identifier as Address), + { + bundlerUrl, + paymasterUrl, + } + ) return { chainId, kernelClient, success: true } as const - } catch (error) { - console.error(`Error creating kernel client for chain ${chainId}:`, error) - captureException(error) + } catch (error) { + console.error(`Error creating kernel client for chain ${chainId}:`, error) + captureException(error) return { chainId, error, success: false } as const } } diff --git a/src/hooks/wallet/useSendMoney.ts b/src/hooks/wallet/useSendMoney.ts index eb61c76af..ffc667bb3 100644 --- a/src/hooks/wallet/useSendMoney.ts +++ b/src/hooks/wallet/useSendMoney.ts @@ -93,12 +93,17 @@ export const useSendMoney = ({ address, handleSendUserOpEncoded }: UseSendMoneyO // On success, refresh real data from blockchain onSuccess: () => { - // Invalidate balance to fetch real value + // Invalidate TanStack Query balance cache to fetch fresh value queryClient.invalidateQueries({ queryKey: ['balance', address] }) // Invalidate transaction history to show new transaction queryClient.invalidateQueries({ queryKey: [TRANSACTIONS] }) + // NOTE: We intentionally do NOT clear Service Worker RPC cache here + // This prioritizes instant load (<50ms) over immediate accuracy + // User sees cached balance instantly, then it updates via background refresh (1-2s) + // Tradeoff: After payment, user may see old balance briefly on next app open + console.log('[useSendMoney] Transaction successful, refreshing balance and history') }, From 7d436ba8c33eef30e9cbd2ec951a3d7df29fe614 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= Date: Thu, 13 Nov 2025 14:23:17 -0300 Subject: [PATCH 052/121] feat: sign user operation and send it for QR payments instead of sending the tx --- src/app/(mobile-ui)/qr-pay/page.tsx | 58 ++++++++++++---- src/hooks/wallet/useSendMoney.ts | 1 - src/hooks/wallet/useSignUserOp.ts | 104 ++++++++++++++++++++++++++++ src/services/manteca.ts | 78 +++++++++++++++++++-- 4 files changed, 218 insertions(+), 23 deletions(-) create mode 100644 src/hooks/wallet/useSignUserOp.ts diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index 8d87cc0a8..3ae5befa0 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -16,6 +16,7 @@ import Image from 'next/image' import PeanutLoading from '@/components/Global/PeanutLoading' import TokenAmountInput from '@/components/Global/TokenAmountInput' import { useWallet } from '@/hooks/wallet/useWallet' +import { useSignUserOp } from '@/hooks/wallet/useSignUserOp' import { clearRedirectUrl, getRedirectUrl, isTxReverted, saveRedirectUrl, formatNumberForDisplay } from '@/utils' import { getShakeClass, type ShakeIntensity } from '@/utils/perk.utils' import { calculateSavingsInCents, isArgentinaMantecaQrPayment, getSavingsMessage } from '@/utils/qr-payment.utils' @@ -62,6 +63,7 @@ export default function QRPayPage() { const timestamp = searchParams.get('t') const qrType = searchParams.get('type') const { balance, sendMoney } = useWallet() + const { signTransferUserOp } = useSignUserOp() const [isSuccess, setIsSuccess] = useState(false) const [errorMessage, setErrorMessage] = useState(null) const [balanceErrorMessage, setBalanceErrorMessage] = useState(null) @@ -554,13 +556,11 @@ export default function QRPayPage() { setLoadingState('Idle') return } + setLoadingState('Preparing transaction') - let userOpHash: Hash - let receipt: TransactionReceipt | null + let signedUserOpData try { - const result = await sendMoney(MANTECA_DEPOSIT_ADDRESS, finalPaymentLock.paymentAgainstAmount) - userOpHash = result.userOpHash - receipt = result.receipt + signedUserOpData = await signTransferUserOp(MANTECA_DEPOSIT_ADDRESS, finalPaymentLock.paymentAgainstAmount) } catch (error) { if ((error as Error).toString().includes('not allowed')) { setErrorMessage('Please confirm the transaction.') @@ -572,26 +572,54 @@ export default function QRPayPage() { setLoadingState('Idle') return } - if (receipt !== null && isTxReverted(receipt)) { - setErrorMessage('Transaction reverted by the network.') - setLoadingState('Idle') - setIsSuccess(false) - return - } - const txHash = receipt?.transactionHash ?? userOpHash + + // Send signed UserOp to backend for coordinated execution + // Backend will: 1) Complete Manteca payment, 2) Broadcast UserOp only if Manteca succeeds setLoadingState('Paying') try { - const qrPayment = await mantecaApi.completeQrPayment({ paymentLockCode: finalPaymentLock.code, txHash }) + const signedUserOp = { + sender: signedUserOpData.signedUserOp.sender, + nonce: signedUserOpData.signedUserOp.nonce, + callData: signedUserOpData.signedUserOp.callData, + signature: signedUserOpData.signedUserOp.signature, + callGasLimit: signedUserOpData.signedUserOp.callGasLimit, + verificationGasLimit: signedUserOpData.signedUserOp.verificationGasLimit, + preVerificationGas: signedUserOpData.signedUserOp.preVerificationGas, + maxFeePerGas: signedUserOpData.signedUserOp.maxFeePerGas, + maxPriorityFeePerGas: signedUserOpData.signedUserOp.maxPriorityFeePerGas, + paymaster: signedUserOpData.signedUserOp.paymaster, + paymasterData: signedUserOpData.signedUserOp.paymasterData, + paymasterVerificationGasLimit: signedUserOpData.signedUserOp.paymasterVerificationGasLimit, + paymasterPostOpGasLimit: signedUserOpData.signedUserOp.paymasterPostOpGasLimit, + } + const qrPayment = await mantecaApi.completeQrPaymentWithSignedTx({ + paymentLockCode: finalPaymentLock.code, + signedUserOp, + chainId: signedUserOpData.chainId, + entryPointAddress: signedUserOpData.entryPointAddress, + }) setQrPayment(qrPayment) setIsSuccess(true) } catch (error) { captureException(error) - setErrorMessage('Could not complete payment due to unexpected error. Please contact support') + const errorMsg = (error as Error).message || 'Could not complete payment' + + // Handle specific error cases + if (errorMsg.toLowerCase().includes('nonce')) { + setErrorMessage( + 'Transaction failed due to account state change. Please try again. If the problem persists, contact support.u' + ) + } else if (errorMsg.toLowerCase().includes('expired') || errorMsg.toLowerCase().includes('stale')) { + setErrorMessage('Payment session expired. Please scan the QR code again.') + } else { + setErrorMessage((error as Error).toString()) + //setErrorMessage('Could not complete payment. Please contact support.') + } setIsSuccess(false) } finally { setLoadingState('Idle') } - }, [paymentLock?.code, sendMoney, qrCode, currencyAmount, setLoadingState]) + }, [paymentLock?.code, signTransferUserOp, qrCode, currencyAmount, setLoadingState]) const payQR = useCallback(async () => { if (paymentProcessor === 'SIMPLEFI') { diff --git a/src/hooks/wallet/useSendMoney.ts b/src/hooks/wallet/useSendMoney.ts index 1630bb94c..81123e3e3 100644 --- a/src/hooks/wallet/useSendMoney.ts +++ b/src/hooks/wallet/useSendMoney.ts @@ -2,7 +2,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query' import { parseUnits, encodeFunctionData, erc20Abi } from 'viem' import type { Address, Hash, Hex, TransactionReceipt } from 'viem' import { PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS, PEANUT_WALLET_CHAIN } from '@/constants' -import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk' import { TRANSACTIONS, BALANCE_DECREASE, SEND_MONEY } from '@/constants/query.consts' import { useToast } from '@/components/0_Bruddle/Toast' diff --git a/src/hooks/wallet/useSignUserOp.ts b/src/hooks/wallet/useSignUserOp.ts new file mode 100644 index 000000000..1735d6602 --- /dev/null +++ b/src/hooks/wallet/useSignUserOp.ts @@ -0,0 +1,104 @@ +'use client' + +import { useCallback } from 'react' +import { useKernelClient } from '@/context/kernelClient.context' +import { signUserOperation } from '@zerodev/sdk/actions' +import { + PEANUT_WALLET_CHAIN, + PEANUT_WALLET_TOKEN, + PEANUT_WALLET_TOKEN_DECIMALS, + USER_OP_ENTRY_POINT, +} from '@/constants/zerodev.consts' +import { parseUnits, encodeFunctionData, erc20Abi } from 'viem' +import type { Hex, Address } from 'viem' +import type { SignUserOperationReturnType } from '@zerodev/sdk/actions' +import { captureException } from '@sentry/nextjs' + +export interface SignedUserOpData { + signedUserOp: SignUserOperationReturnType + chainId: string + entryPointAddress: Address +} + +/** + * Hook to sign UserOperations without broadcasting them to the network. + * This allows for a two-phase commit pattern where the transaction is signed first, + * then submitted from the backend after confirming external dependencies (e.g., Manteca payment). + */ +export const useSignUserOp = () => { + const { getClientForChain } = useKernelClient() + + /** + * Signs a USDC transfer UserOperation without broadcasting it. + * + * @param toAddress - Recipient address + * @param amountInUsd - Amount in USD (will be converted to USDC token decimals) + * @param chainId - Chain ID (defaults to Peanut wallet chain) + * @returns Signed UserOperation data ready for backend submission + * + * @throws Error if signing fails (e.g., user cancels, invalid parameters) + */ + const signTransferUserOp = useCallback( + async ( + toAddress: Address, + amountInUsd: string, + chainId: string = PEANUT_WALLET_CHAIN.id.toString() + ): Promise => { + try { + const client = getClientForChain(chainId) + + // Ensure account is initialized + if (!client.account) { + throw new Error('Smart account not initialized') + } + + // Parse amount to USDC decimals (6 decimals) + const amount = parseUnits(amountInUsd.replace(/,/g, ''), PEANUT_WALLET_TOKEN_DECIMALS) + + // Encode USDC transfer function call + const txData = encodeFunctionData({ + abi: erc20Abi, + functionName: 'transfer', + args: [toAddress, amount], + }) as Hex + + // Build USDC transfer call (not native token transfer) + const calls = [ + { + to: PEANUT_WALLET_TOKEN as Hex, // USDC contract address + value: 0n, // No native token sent + data: txData, // Encoded transfer call + }, + ] + + // Sign the UserOperation (does NOT broadcast) + // This fills in all required fields (gas, nonce, paymaster, signature) + const signedUserOp = await signUserOperation(client, { + account: client.account, + calls, + }) + + // Return everything the backend needs to submit the UserOp + return { + signedUserOp, + chainId, + entryPointAddress: USER_OP_ENTRY_POINT.address, + } + } catch (error) { + console.error('[useSignUserOp] Error signing UserOperation:', error) + captureException(error, { + tags: { feature: 'sign-user-op' }, + extra: { + toAddress, + amountInUsd, + chainId, + }, + }) + throw error + } + }, + [getClientForChain] + ) + + return { signTransferUserOp } +} diff --git a/src/services/manteca.ts b/src/services/manteca.ts index 5c04a156a..507a184a7 100644 --- a/src/services/manteca.ts +++ b/src/services/manteca.ts @@ -5,9 +5,10 @@ import { type MantecaWithdrawResponse, type CreateMantecaOnrampParams, } from '@/types/manteca.types' -import { fetchWithSentry } from '@/utils' +import { fetchWithSentry, jsonStringify } from '@/utils' import Cookies from 'js-cookie' import type { Address, Hash } from 'viem' +import type { SignUserOperationReturnType } from '@zerodev/sdk/actions' export interface QrPaymentRequest { qrCode: string @@ -107,7 +108,7 @@ export const mantecaApi = { 'Content-Type': 'application/json', Authorization: `Bearer ${Cookies.get('jwt-token')}`, }, - body: JSON.stringify(data), + body: jsonStringify(data), }) if (!response.ok) { @@ -130,7 +131,7 @@ export const mantecaApi = { 'Content-Type': 'application/json', Authorization: `Bearer ${Cookies.get('jwt-token')}`, }, - body: JSON.stringify({ paymentLockCode, txHash }), + body: jsonStringify({ paymentLockCode, txHash }), }) if (!response.ok) { @@ -140,6 +141,69 @@ export const mantecaApi = { return response.json() }, + /** + * Complete QR payment with a pre-signed UserOperation. + * This allows the backend to complete the Manteca payment BEFORE broadcasting the transaction, + * preventing funds from being stuck in Manteca if their payment fails. + * + * Flow: + * 1. Frontend signs UserOp (funds still in user's wallet) + * 2. Backend receives signed UserOp + * 3. Backend completes Manteca payment first + * 4. If Manteca succeeds, backend broadcasts UserOp + * 5. If Manteca fails, UserOp is never broadcasted (funds safe) + */ + completeQrPaymentWithSignedTx: async ({ + paymentLockCode, + signedUserOp, + chainId, + entryPointAddress, + }: { + paymentLockCode: string + signedUserOp: Pick< + SignUserOperationReturnType, + | 'sender' + | 'nonce' + | 'callData' + | 'signature' + | 'callGasLimit' + | 'verificationGasLimit' + | 'preVerificationGas' + | 'maxFeePerGas' + | 'maxPriorityFeePerGas' + | 'paymaster' + | 'paymasterData' + | 'paymasterVerificationGasLimit' + | 'paymasterPostOpGasLimit' + > + chainId: string + entryPointAddress: Address + }): Promise => { + const response = await fetchWithSentry( + `${PEANUT_API_URL}/manteca/qr-payment/complete-with-signed-tx`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${Cookies.get('jwt-token')}`, + }, + body: jsonStringify({ + paymentLockCode, + signedUserOp, + chainId, + entryPointAddress, + }), + }, + 120000 + ) + + if (!response.ok) { + const errorData = await response.json().catch(() => ({})) + throw new Error(errorData?.message || errorData?.error || `QR payment failed: ${response.statusText}`) + } + + return response.json() + }, claimPerk: async ( mantecaTransferId: string ): Promise<{ @@ -152,7 +216,7 @@ export const mantecaApi = { 'Content-Type': 'application/json', Authorization: `Bearer ${Cookies.get('jwt-token')}`, }, - body: JSON.stringify({ mantecaTransferId }), + body: jsonStringify({ mantecaTransferId }), }) if (!response.ok) { @@ -188,7 +252,7 @@ export const mantecaApi = { 'Content-Type': 'application/json', Authorization: `Bearer ${Cookies.get('jwt-token')}`, }, - body: JSON.stringify(params), + body: jsonStringify(params), }) if (!response.ok) { @@ -209,7 +273,7 @@ export const mantecaApi = { 'Content-Type': 'application/json', Authorization: `Bearer ${Cookies.get('jwt-token')}`, }, - body: JSON.stringify({ + body: jsonStringify({ usdAmount: params.usdAmount, currency: params.currency, chargeId: params.chargeId, @@ -269,7 +333,7 @@ export const mantecaApi = { 'Content-Type': 'application/json', Authorization: `Bearer ${Cookies.get('jwt-token')}`, }, - body: JSON.stringify(data), + body: jsonStringify(data), }) const result = await response.json() From ff042b119a40126948480fa3514702fd8d82ed45 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 14:37:22 -0300 Subject: [PATCH 053/121] fix bad sw registration --- src/app/(mobile-ui)/qr-pay/page.tsx | 6 ++- src/app/layout.tsx | 32 +++++++++++++-- src/components/Global/DirectSendQR/index.tsx | 40 ++++++------------- .../Global/QRBottomDrawer/index.tsx | 5 ++- src/context/kernelClient.context.tsx | 34 ++++++++-------- src/context/pushProvider.tsx | 23 ++++++----- 6 files changed, 79 insertions(+), 61 deletions(-) diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index ea9fa3cd4..ba23ba298 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -50,7 +50,9 @@ import { useWebSocket } from '@/hooks/useWebSocket' import type { HistoryEntry } from '@/hooks/useTransactionHistory' import { completeHistoryEntry } from '@/utils/history.utils' import { useSupportModalContext } from '@/context/SupportModalContext' -import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif' +// Lazy load 800KB success animation - only needed on success screen, not initial load +// CRITICAL: This GIF is 80% of the /qr-pay bundle size. Load it dynamically. +const chillPeanutAnim = '/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif' import maintenanceConfig from '@/config/underMaintenance.config' const MAX_QR_PAYMENT_AMOUNT = '2000' @@ -1086,7 +1088,7 @@ export default function QRPayPage() {
Peanut Mascot - {/* Optimize critical path resource loading */} - {/* Prefetch: Hints to browser to download during idle time for faster subsequent navigation */} + {/* CRITICAL PATH: Optimize QR payment flow loading */} + {/* Prefetch /qr-pay route + DNS for Manteca API */} + + - {/* DNS prefetch: Resolves DNS for external domains early to reduce latency on first API call */} - + {/* Service Worker Registration: Register early for offline support and caching */} + {/* CRITICAL: Must run before React hydration to enable offline-first PWA */} + {process.env.NODE_ENV !== 'development' && ( + + )} {/* Note: Google Tag Manager (gtag.js) does not support version pinning.*/} {process.env.NODE_ENV !== 'development' && process.env.NEXT_PUBLIC_GA_KEY && ( diff --git a/src/components/Global/DirectSendQR/index.tsx b/src/components/Global/DirectSendQR/index.tsx index 01474083e..b52d8cbb2 100644 --- a/src/components/Global/DirectSendQR/index.tsx +++ b/src/components/Global/DirectSendQR/index.tsx @@ -6,11 +6,9 @@ import { useToast } from '@/components/0_Bruddle/Toast' import Modal from '@/components/Global/Modal' import QRBottomDrawer from '@/components/Global/QRBottomDrawer' import PeanutLoading from '@/components/Global/PeanutLoading' -// Lazy load QR scanner to reduce initial bundle size (~50KB with jsQR library) -// Wrapped in error boundary to gracefully handle chunk load failures -import { lazy, Suspense } from 'react' -const QRScanner = lazy(() => import('@/components/Global/QRScanner')) -import LazyLoadErrorBoundary from '@/components/Global/LazyLoadErrorBoundary' +// QRScanner is NOT lazy-loaded - critical path for payments, needs instant response +// 50KB bundle cost is worth it for better UX on primary flow +import QRScanner from '@/components/Global/QRScanner' import { useAuth } from '@/context/authContext' import { usePush } from '@/context/pushProvider' import { useAppDispatch } from '@/redux/hooks' @@ -503,29 +501,17 @@ export default function DirectSendQr({ {isQRScannerOpen && ( <> - -
Failed to load QR scanner. Please refresh the page.
-
- } - > - }> - setIsQRScannerOpen(false)} isOpen={true} /> - - - {/* Render QRBottomDrawer once outside Suspense to prevent duplicate mounting - Wrapped in div with z-[60] to ensure drawer appears above QRScanner (z-50) + setIsQRScannerOpen(false)} isOpen={true} /> + {/* Render QRBottomDrawer with z-[60] to ensure it appears above QRScanner (z-50) This allows "scan OR be scanned" dual functionality */} -
- -
+ )} diff --git a/src/components/Global/QRBottomDrawer/index.tsx b/src/components/Global/QRBottomDrawer/index.tsx index bc386e540..40a10d288 100644 --- a/src/components/Global/QRBottomDrawer/index.tsx +++ b/src/components/Global/QRBottomDrawer/index.tsx @@ -10,9 +10,10 @@ interface QRBottomDrawerProps { expandedTitle: string text: string buttonText: string + className?: string } -const QRBottomDrawer = ({ url, collapsedTitle, expandedTitle, text, buttonText }: QRBottomDrawerProps) => { +const QRBottomDrawer = ({ url, collapsedTitle, expandedTitle, text, buttonText, className }: QRBottomDrawerProps) => { const contentRef = useRef(null) const snapPoints = [0.75, 1] // 75%, 100% of screen height @@ -31,7 +32,7 @@ const QRBottomDrawer = ({ url, collapsedTitle, expandedTitle, text, buttonText } setActiveSnapPoint={handleSnapPointChange} modal={false} > - +

{activeSnapPoint === snapPoints[0] ? collapsedTitle : expandedTitle} diff --git a/src/context/kernelClient.context.tsx b/src/context/kernelClient.context.tsx index 6a15e00a1..e6d75d4a6 100644 --- a/src/context/kernelClient.context.tsx +++ b/src/context/kernelClient.context.tsx @@ -194,24 +194,24 @@ export const KernelClientProvider = ({ children }: { children: ReactNode }) => { // Currently only 1 chain configured (Arbitrum), but this enables future multi-chain support const clientPromises = Object.entries(PUBLIC_CLIENTS_BY_CHAIN).map( async ([chainId, { client, chain, bundlerUrl, paymasterUrl }]) => { - try { - const kernelClient = await createKernelClientForChain( - client, - chain, - isAfterZeroDevMigration, - webAuthnKey, - isAfterZeroDevMigration - ? undefined - : (user?.accounts.find((a) => a.type === 'peanut-wallet')!.identifier as Address), - { - bundlerUrl, - paymasterUrl, - } - ) + try { + const kernelClient = await createKernelClientForChain( + client, + chain, + isAfterZeroDevMigration, + webAuthnKey, + isAfterZeroDevMigration + ? undefined + : (user?.accounts.find((a) => a.type === 'peanut-wallet')!.identifier as Address), + { + bundlerUrl, + paymasterUrl, + } + ) return { chainId, kernelClient, success: true } as const - } catch (error) { - console.error(`Error creating kernel client for chain ${chainId}:`, error) - captureException(error) + } catch (error) { + console.error(`Error creating kernel client for chain ${chainId}:`, error) + captureException(error) return { chainId, error, success: false } as const } } diff --git a/src/context/pushProvider.tsx b/src/context/pushProvider.tsx index 0f212eaa3..61663e41f 100644 --- a/src/context/pushProvider.tsx +++ b/src/context/pushProvider.tsx @@ -29,17 +29,21 @@ export function PushProvider({ children }: { children: React.ReactNode }) { const [subscription, setSubscription] = useState(null) const registerServiceWorker = async () => { - console.log('Registering service worker') + console.log('[PushProvider] Getting service worker registration') try { - const reg = await navigator.serviceWorker.register('/sw.js', { - scope: '/', - updateViaCache: 'none', - }) - console.log({ reg }) + // Use existing SW registration (registered in layout.tsx for offline support) + // navigator.serviceWorker.ready waits for SW to be registered and active + // Timeout after 10s to prevent infinite wait if SW registration fails + const reg = (await Promise.race([ + navigator.serviceWorker.ready, + new Promise((_, reject) => setTimeout(() => reject(new Error('SW registration timeout')), 10000)), + ])) as ServiceWorkerRegistration + + console.log('[PushProvider] SW already registered:', reg.scope) setRegistration(reg) const sub = await reg.pushManager.getSubscription() - console.log({ sub }) + console.log('[PushProvider] Push subscription:', sub) if (sub) { // @ts-ignore @@ -47,8 +51,9 @@ export function PushProvider({ children }: { children: React.ReactNode }) { setIsSubscribed(true) } } catch (error) { - console.error('Service Worker registration failed:', error) + console.error('[PushProvider] Failed to get SW registration:', error) captureException(error) + // toast.error('Failed to initialize notifications') } } @@ -65,7 +70,7 @@ export function PushProvider({ children }: { children: React.ReactNode }) { .catch((error) => { console.error('Service Worker not ready:', error) captureException(error) - toast.error('Failed to initialize notifications') + // toast.error('Failed to initialize notifications') }) } else { console.log('Service Worker and Push Manager are not supported') From d308a39cf6060ecfe3cb20b88e5d697bc7cebe3b Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 15:00:32 -0300 Subject: [PATCH 054/121] fix --- next.config.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/next.config.js b/next.config.js index 424711a5e..b0d966e43 100644 --- a/next.config.js +++ b/next.config.js @@ -200,14 +200,17 @@ if (process.env.NODE_ENV !== 'development' && !Boolean(process.env.LOCAL_BUILD)) module.exports = nextConfig } +// Apply bundle analyzer and Serwist (production only) if (process.env.NODE_ENV !== 'development') { module.exports = async () => { const withSerwist = (await import('@serwist/next')).default({ swSrc: './src/app/sw.ts', swDest: 'public/sw.js', }) - return withSerwist(nextConfig) + // Wrap both Serwist AND bundle analyzer + return withSerwist(withBundleAnalyzer(nextConfig)) } +} else { + // Development: only bundle analyzer (no Serwist) + module.exports = withBundleAnalyzer(nextConfig) } - -module.exports = withBundleAnalyzer(nextConfig) From 793729ade3748abc3961ebc096e4ee755f72d6e9 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 15:14:23 -0300 Subject: [PATCH 055/121] final fix --- src/app/sw.ts | 34 ++++++++++----------------------- src/hooks/wallet/useBalance.ts | 35 +++++++++++++++++----------------- 2 files changed, 27 insertions(+), 42 deletions(-) diff --git a/src/app/sw.ts b/src/app/sw.ts index d2f005050..989c92ddc 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -216,31 +216,17 @@ const serwist = new Serwist({ }), }, - // Blockchain RPC calls: Stale-while-revalidate for instant balance/blockchain data - // Caches eth_call, balanceOf, and other read-only RPC responses - // Critical for instant balance display on home screen + // ⚠️ NOTE: RPC POST request caching is NOT supported by Cache Storage API + // See: https://w3c.github.io/ServiceWorker/#cache-put (point 4) // - // ⚠️ Cache TTL considerations: - // - Balance CAN change frequently (user makes payment, receives money) - // - 5min cache balances instant load vs. stale data risk - // - StaleWhileRevalidate ensures fresh data loads in background (1-2s) - // - User sees cached balance instantly, then it updates when fresh data arrives - { - matcher: ({ url, request }) => - request.method === 'POST' && RPC_HOSTNAMES.some((hostname) => url.hostname.includes(hostname)), - handler: new StaleWhileRevalidate({ - cacheName: getCacheNameWithVersion(CACHE_NAMES.RPC, CACHE_VERSION), - plugins: [ - new CacheableResponsePlugin({ - statuses: [200], - }), - new ExpirationPlugin({ - maxAgeSeconds: 60 * 5, // 5 min (balance can change from txs/payments) - maxEntries: 50, - }), - ], - }), - }, + // Blockchain RPC calls (balanceOf, eth_call) use POST method and cannot be cached + // by Service Workers. Alternative solutions: + // - Option 1: Server-side proxy to convert POST→GET (enables SW caching) + // - Option 2: Custom IndexedDB caching (complex, ~100 lines of code) + // - Option 3: TanStack Query in-memory cache only (current approach) + // + // Current: Relying on TanStack Query's in-memory cache (30s staleTime) + // Future: Consider implementing server-side proxy for true offline balance display ], }) diff --git a/src/hooks/wallet/useBalance.ts b/src/hooks/wallet/useBalance.ts index 1d23d7a10..ef6a89fa4 100644 --- a/src/hooks/wallet/useBalance.ts +++ b/src/hooks/wallet/useBalance.ts @@ -6,28 +6,27 @@ import { PEANUT_WALLET_TOKEN, peanutPublicClient } from '@/constants' /** * Hook to fetch and auto-refresh wallet balance using TanStack Query * - * Cache-first strategy with background updates (instant load): - * 1. TanStack tries to fetch (staleTime: 0) - * 2. Service Worker intercepts RPC call with StaleWhileRevalidate - * 3. SW returns cached balance instantly (<50ms) - * 4. SW fetches fresh balance in background from blockchain RPC - * 5. UI updates seamlessly when fresh balance arrives + * ⚠️ NOTE: Service Worker CANNOT cache RPC POST requests + * - Blockchain RPC calls use POST method (not cacheable by Cache Storage API) + * - See: https://w3c.github.io/ServiceWorker/#cache-put (point 4) + * - Future: Consider server-side proxy to enable SW caching * - * Why staleTime: 0: - * - Always attempts refetch to trigger SW cache layer - * - SW returns cached data instantly (no waiting) - * - Fresh data loads in background and updates UI - * - Prevents excessive RPC calls (SW handles deduplication) + * Current caching strategy (in-memory only): + * - TanStack Query caches balance for 30 seconds in memory + * - Cache is lost on page refresh/reload + * - Balance refetches from blockchain RPC on every app open * - * Cache layers: - * - Service Worker: 5 minutes (balanceOf calls cached at HTTP level) - * - TanStack Query: In-memory for 5min (fast subsequent renders) + * Why staleTime: 30s: + * - Balances data that's 30s old during active session + * - Reduces RPC calls during navigation (balance displayed on multiple pages) + * - Prevents rate limiting from RPC providers + * - Balance still updates every 30s automatically * * Features: - * - Instant cached response on repeat visits (<50ms) - * - Background refresh for accuracy + * - In-memory cache for 30s (fast during active session) * - Auto-refreshes every 30 seconds - * - Built-in retry on failure + * - Built-in retry with exponential backoff + * - Refetches on window focus and network reconnection */ export const useBalance = (address: Address | undefined) => { return useQuery({ @@ -43,7 +42,7 @@ export const useBalance = (address: Address | undefined) => { return balance }, enabled: !!address, // Only run query if address exists - staleTime: 0, // Always refetch to trigger SW cache-first (instant) + background update + staleTime: 30 * 1000, // Cache balance for 30s in memory (no SW caching for POST requests) gcTime: 5 * 60 * 1000, // Keep in memory for 5min refetchInterval: 30 * 1000, // Auto-refresh every 30 seconds refetchOnWindowFocus: true, // Refresh when tab regains focus From 401367a73024e02500222f38577b581fb10431ff Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 15:41:50 -0300 Subject: [PATCH 056/121] final service worker fixes --- src/app/sw.ts | 264 +++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 219 insertions(+), 45 deletions(-) diff --git a/src/app/sw.ts b/src/app/sw.ts index 989c92ddc..2eac4cd37 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -1,3 +1,4 @@ +/// import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist' import { Serwist, @@ -16,22 +17,37 @@ const CACHE_NAMES = { KYC_MERCHANT: 'kyc-merchant-api', PRICES: 'prices-api', EXTERNAL_RESOURCES: 'external-resources', - RPC: 'rpc-api', } as const const getCacheNameWithVersion = (name: string, version: string): string => `${name}-${version}` -// RPC provider hostnames for Service Worker caching -// ⚠️ DUPLICATION NOTE: This list mirrors rpcUrls in src/constants/general.consts.ts -// Service Workers run in a separate context and cannot use @ imports or module imports -// They only have access to build-time environment variables (NEXT_PUBLIC_*) +// Time constants for cache expiration (seconds) +const TIME = { + ONE_DAY: 60 * 60 * 24, + ONE_WEEK: 60 * 60 * 24 * 7, + THIRTY_DAYS: 60 * 60 * 24 * 30, + FIVE_MINUTES: 60 * 5, +} as const + +// ❌ RPC CACHING NOT SUPPORTED (commented out for future reference) +// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +// RPC provider hostnames - kept for documentation/future use +// +// ⚠️ CRITICAL LIMITATION: Blockchain RPC calls use POST method +// - Cache Storage API CANNOT cache POST requests (W3C spec limitation) +// - See: https://w3c.github.io/ServiceWorker/#cache-put (point 4) +// - All Ethereum JSON-RPC calls (eth_getBalance, eth_call, etc.) use POST +// - No RPC provider supports GET requests (not in JSON-RPC spec) // -// When adding a new RPC provider: -// 1. Add full URL to rpcUrls in src/constants/general.consts.ts -// 2. Extract hostname and add to this RPC_HOSTNAMES array +// 💡 ALTERNATIVES FOR FUTURE: +// 1. Server-side proxy: Convert RPC POST → GET via Next.js API route +// 2. IndexedDB: Manual caching with custom key generation (complex) +// 3. Accept limitation: Use TanStack Query in-memory cache only (current) // -// Example: If adding 'https://new-provider.com/rpc' to rpcUrls: -// → Add 'new-provider.com' to RPC_HOSTNAMES below +// When adding a new RPC provider to src/constants/general.consts.ts: +// - Extract hostname and add to this array for documentation +// - Remember: Cannot be cached by Service Worker (POST limitation) +/* const RPC_HOSTNAMES = [ 'alchemy.com', 'infura.io', @@ -46,27 +62,32 @@ const RPC_HOSTNAMES = [ 'public-rpc.com', 'scroll.io', ] as const +*/ +// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // This declares the value of `injectionPoint` to TypeScript. // `injectionPoint` is the string that will be replaced by the // actual precache manifest. By default, this string is set to // `"self.__SW_MANIFEST"`. +// Type-safe environment variable access for Next.js build-time injection +// Next.js replaces process.env.NEXT_PUBLIC_* at build time in Service Worker context +interface NextPublicEnv { + NEXT_PUBLIC_PEANUT_API_URL?: string + NEXT_PUBLIC_API_VERSION?: string +} + declare global { interface WorkerGlobalScope extends SerwistGlobalConfig { __SW_MANIFEST: (PrecacheEntry | string)[] | undefined } - // Next.js replaces process.env.NEXT_PUBLIC_* at build time - const process: { - env: { - NEXT_PUBLIC_PEANUT_API_URL?: string - NEXT_PUBLIC_API_VERSION?: string - } - } } -// @ts-ignore declare const self: ServiceWorkerGlobalScope +// Helper to access Next.js build-time injected env vars with type safety +// Uses double assertion to avoid 'as any' while maintaining type safety +const getEnv = (): NextPublicEnv => process.env as unknown as NextPublicEnv + // Cache version tied to API version - automatic invalidation on breaking changes // Uses NEXT_PUBLIC_API_VERSION (set in Vercel env vars or .env) // Increment NEXT_PUBLIC_API_VERSION only when: @@ -74,12 +95,12 @@ declare const self: ServiceWorkerGlobalScope // - Cache strategy changes (e.g., switching from NetworkFirst to CacheFirst) // Most deploys: API_VERSION stays the same → cache preserved (fast repeat visits) // Breaking changes: Bump API_VERSION (v1→v2) → cache auto-invalidates across all users -const CACHE_VERSION = process.env.NEXT_PUBLIC_API_VERSION || 'v1' +const CACHE_VERSION = getEnv().NEXT_PUBLIC_API_VERSION || 'v1' // Extract API hostname from build-time environment variable // Next.js replaces NEXT_PUBLIC_* variables at build time, so this works in all environments // Supports dev (localhost), staging, and production without hardcoding -const API_URL = process.env.NEXT_PUBLIC_PEANUT_API_URL || 'https://api.peanut.me' +const API_URL = getEnv().NEXT_PUBLIC_PEANUT_API_URL || 'https://api.peanut.me' const API_HOSTNAME = new URL(API_URL).hostname /** @@ -99,6 +120,71 @@ const serwist = new Serwist({ navigationPreload: true, disableDevLogs: false, runtimeCaching: [ + // ═══════════════════════════════════════════════════════════════════ + // 🎯 TIERED NAVIGATION CACHE SYSTEM (iOS Quota Protection) + // ═══════════════════════════════════════════════════════════════════ + // iOS Safari: ~50MB total quota. Separate caches = granular eviction control. + // On quota exceeded, iOS evicts ENTIRE caches (not individual entries). + // Strategy: Separate critical pages into their own caches for protection. + + // 🔴 TIER 1 (CRITICAL): /home page - NEVER EVICT + // Landing page for PWA launch. Must always be available offline. + // Separate cache ensures it survives quota pressure from other pages. + { + matcher: ({ request, url }) => request.mode === 'navigate' && url.pathname === '/home', + handler: new NetworkFirst({ + cacheName: 'navigation-home', // Isolated cache for protection + plugins: [ + new CacheableResponsePlugin({ + statuses: [200], + }), + new ExpirationPlugin({ + maxEntries: 1, // Only /home + maxAgeSeconds: TIME.THIRTY_DAYS, // 30 days (long TTL) + }), + ], + }), + }, + + // 🟡 TIER 2 (IMPORTANT): Key pages - Evict before /home + // Pages users visit regularly: history, profile, points + // Separate cache protects from being evicted with random pages + { + matcher: ({ request, url }) => + request.mode === 'navigate' && + ['/history', '/profile', '/points'].some((path) => url.pathname.startsWith(path)), + handler: new NetworkFirst({ + cacheName: 'navigation-important', // Medium priority cache + plugins: [ + new CacheableResponsePlugin({ + statuses: [200], + }), + new ExpirationPlugin({ + maxEntries: 3, // 3 important pages + maxAgeSeconds: TIME.ONE_WEEK, // 1 week + }), + ], + }), + }, + + // 🟢 TIER 3 (LOW): All other pages - Evict first + // Random pages, settings, etc. Nice-to-have offline but not critical + { + matcher: ({ request }) => request.mode === 'navigate', + handler: new NetworkFirst({ + cacheName: 'navigation-other', // Low priority cache + plugins: [ + new CacheableResponsePlugin({ + statuses: [200], + }), + new ExpirationPlugin({ + maxEntries: 6, // 6 miscellaneous pages + maxAgeSeconds: TIME.ONE_DAY, // 1 day (short TTL) + }), + ], + }), + }, + // User data: Stale-while-revalidate for instant load with background refresh // Serves cached data instantly (even if days old), updates in background // Critical for fast app startup - user sees profile/username/balance immediately @@ -117,7 +203,7 @@ const serwist = new Serwist({ statuses: [200], }), new ExpirationPlugin({ - maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week (instant load anytime) + maxAgeSeconds: TIME.ONE_WEEK, // 1 week (instant load anytime) maxEntries: 20, }), ], @@ -165,8 +251,32 @@ const serwist = new Serwist({ statuses: [200], }), new ExpirationPlugin({ - maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week (instant load anytime) - maxEntries: 30, + maxAgeSeconds: TIME.ONE_WEEK, // 1 week (instant load anytime) + maxEntries: 30, // iOS quota: Limit history cache size + }), + ], + }), + }, + + // Points & Invites: Stale-while-revalidate for offline points viewing + // Users want to see their points/invites offline (read-only data) + // Low change frequency - perfect for 1 week cache + // iOS quota-friendly: Small entries, rarely accessed + { + matcher: ({ url }) => + isApiRequest(url) && + (url.pathname.includes('/api/invites') || + url.pathname.includes('/api/points') || + url.pathname.includes('/tier')), + handler: new StaleWhileRevalidate({ + cacheName: getCacheNameWithVersion(CACHE_NAMES.USER_API, CACHE_VERSION), + plugins: [ + new CacheableResponsePlugin({ + statuses: [200], + }), + new ExpirationPlugin({ + maxAgeSeconds: TIME.ONE_WEEK, // 1 week (rarely changes) + maxEntries: 10, // iOS quota: Small cache for points data }), ], }), @@ -186,7 +296,7 @@ const serwist = new Serwist({ statuses: [200], }), new ExpirationPlugin({ - maxAgeSeconds: 60 * 5, // 5 min + maxAgeSeconds: TIME.FIVE_MINUTES, // 5 min maxEntries: 20, }), ], @@ -194,8 +304,14 @@ const serwist = new Serwist({ }, // External images: Cache-first - // Serves from cache immediately, updates in background - // Images are immutable, so cache-first provides best performance + // Serves from cache immediately, never needs background update + // Images are immutable - if URL changes, it's a different image + // + // ⚠️ iOS Quota Challenge: Images vary greatly in size (5KB flags vs 500KB profile pics) + // - Ideal: maxSizeBytes limit (not supported by Serwist) + // - Reality: Conservative maxEntries (30) + time-based safety net (30 days) + // - 30 images × 200KB avg = ~6MB (safe for iOS 50MB quota) + // - Worst case: 30 × 500KB = 15MB (still safe, leaves 35MB for other caches) { matcher: ({ url }) => url.origin === 'https://flagcdn.com' || @@ -210,7 +326,7 @@ const serwist = new Serwist({ }), new ExpirationPlugin({ maxEntries: 100, - maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week + maxAgeSeconds: TIME.THIRTY_DAYS, // Safety net: Clean up very old images }), ], }), @@ -237,9 +353,9 @@ self.addEventListener('push', (event) => { self.registration.showNotification(data.title, { body: data.message, tag: 'notification', - vibrate: [100, 50, 100], + vibrate: [100, 50, 100], // Mobile notification vibration pattern icon: '/icons/icon-192x192.png', - }) + } as NotificationOptions) ) }) @@ -274,7 +390,6 @@ self.addEventListener('activate', (event) => { getCacheNameWithVersion(CACHE_NAMES.TRANSACTIONS, CACHE_VERSION), getCacheNameWithVersion(CACHE_NAMES.KYC_MERCHANT, CACHE_VERSION), getCacheNameWithVersion(CACHE_NAMES.EXTERNAL_RESOURCES, CACHE_VERSION), - getCacheNameWithVersion(CACHE_NAMES.RPC, CACHE_VERSION), ] // Delete old cache versions (not current caches, not precache) @@ -292,28 +407,87 @@ self.addEventListener('activate', (event) => { console.error('Cache cleanup failed:', error) // Handle quota exceeded error (can occur on any platform when storage is full) - // Clear only API caches to preserve app shell (precache) for faster reload + // ⚠️ iOS CRITICAL: Smart eviction preserves critical data + // Clear caches in priority order: LOW → MEDIUM → HIGH → (never CRITICAL) if (error instanceof Error && error.name === 'QuotaExceededError') { - console.error('Quota exceeded - clearing API caches only, preserving app shell') + console.error('⚠️ Quota exceeded - starting tiered cache eviction') const allCaches = await caches.keys() - const apiCachePatterns = [ - CACHE_NAMES.USER_API, - CACHE_NAMES.PRICES, - CACHE_NAMES.TRANSACTIONS, - CACHE_NAMES.KYC_MERCHANT, - CACHE_NAMES.EXTERNAL_RESOURCES, - CACHE_NAMES.RPC, - ] - - await Promise.all( + + // Priority 1: Clear LOW priority caches (least important) + const lowPriority = ['navigation-other', CACHE_NAMES.EXTERNAL_RESOURCES] + let cleared = await Promise.all( allCaches - .filter((name) => apiCachePatterns.some((pattern) => name.includes(pattern))) + .filter((name) => lowPriority.some((pattern) => name.includes(pattern) || name === pattern)) .map((name) => { - console.log('Clearing API cache due to quota:', name) + console.log(' [LOW] Clearing:', name) return caches.delete(name) }) ) - // Precache (app shell) is preserved for faster subsequent loads + + // Priority 2: Clear MEDIUM priority if still needed (important but not critical) + // Check if still out of space after clearing LOW priority caches + try { + const estimate = await navigator.storage.estimate() + const usageRatio = estimate.usage && estimate.quota ? estimate.usage / estimate.quota : 0 + + // If still using >85% of quota, clear MEDIUM priority + if (usageRatio > 0.85) { + const mediumPriority = ['navigation-important', CACHE_NAMES.PRICES] + cleared = await Promise.all( + allCaches + .filter((name) => + mediumPriority.some((pattern) => name.includes(pattern) || name === pattern) + ) + .map((name) => { + console.log(' [MEDIUM] Clearing:', name) + return caches.delete(name) + }) + ) + console.log(` Storage: ${(usageRatio * 100).toFixed(1)}% full after LOW eviction`) + } + } catch (e) { + // Fallback to original logic if storage.estimate() fails + console.warn('storage.estimate() failed, using fallback eviction') + if (cleared.length < 5) { + const mediumPriority = ['navigation-important', CACHE_NAMES.PRICES] + cleared = await Promise.all( + allCaches + .filter((name) => + mediumPriority.some((pattern) => name.includes(pattern) || name === pattern) + ) + .map((name) => { + console.log(' [MEDIUM] Clearing:', name) + return caches.delete(name) + }) + ) + } + } + + // Priority 3: Reduce transaction history size (keep last 10 entries) + // This is better than deleting entirely - preserves some history + try { + const txCacheName = allCaches.find((name) => name.includes(CACHE_NAMES.TRANSACTIONS)) + if (txCacheName) { + const cache = await caches.open(txCacheName) + const requests = await cache.keys() + if (requests.length > 10) { + // Keep newest 10, delete the rest + const toDelete = requests.slice(0, requests.length - 10) + await Promise.all(toDelete.map((req) => cache.delete(req))) + console.log(` [HIGH] Reduced transactions: ${requests.length} → 10 entries`) + } + } + } catch (e) { + console.error('Failed to reduce transaction cache:', e) + } + + // ✅ NEVER CLEARED (protected): + // - User API (profile, username) + // - navigation-home (/home page) + // - Precache (app shell) + // - Last 10 transaction history entries + + console.log('✅ Tiered eviction complete. Critical data preserved.') } } })() From cf8b05d4edb335bf88dfa3db428ce7be5b45cec9 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 15:52:04 -0300 Subject: [PATCH 057/121] delete unused docs --- docs/CRISP_IOS_FIX.md | 75 ----------- docs/INVITE_GRAPH_PR.md | 178 ------------------------- docs/INVITE_GRAPH_PRODUCTION_REVIEW.md | 132 ------------------ 3 files changed, 385 deletions(-) delete mode 100644 docs/CRISP_IOS_FIX.md delete mode 100644 docs/INVITE_GRAPH_PR.md delete mode 100644 docs/INVITE_GRAPH_PRODUCTION_REVIEW.md diff --git a/docs/CRISP_IOS_FIX.md b/docs/CRISP_IOS_FIX.md deleted file mode 100644 index 1c9bab333..000000000 --- a/docs/CRISP_IOS_FIX.md +++ /dev/null @@ -1,75 +0,0 @@ -# Crisp iOS Fix - -**Problem:** Support drawer blank forever on iOS -**Fix:** Removed Suspense + manual URL params + device-specific timeouts -**Status:** Ready to test on iOS device - -## What Was Wrong - -iOS Safari + Suspense + useSearchParams = streaming deadlock → blank screen forever - -## Changes (44 net lines) - -1. **Removed Suspense wrapper** - Causes Safari buffering issue -2. **Manual URLSearchParams** - Replaced useSearchParams() hook (iOS hydration bug) -3. **Device timeouts** - 3s desktop, 8s iOS (DRY hook: `useCrispIframeReady`) -4. **iOS height styles** - Added `-webkit-fill-available` fallback - -## Files - -``` -src/app/crisp-proxy/page.tsx | ±40 lines -src/hooks/useCrispIframeReady.ts | +55 (NEW) -src/components/Global/SupportDrawer/index.tsx | -19 lines -src/app/(mobile-ui)/support/page.tsx | -11 lines -``` - -## How Timeouts Work - -**NOT forced delays** - Shows content immediately when ready: - -```typescript -// Listens for CRISP_READY postMessage -// Shows iframe AS SOON as message received (typically 1-2s) -// Timeout = MAX wait to prevent infinite loading -``` - -**Timeline:** - -- Good connection: Crisp loads in 1-2s → shows immediately ✅ -- Slow connection: Still waits for CRISP_READY, up to timeout -- Crisp fails: Timeout fires → shows friendly error with retry button - -**Why device-specific?** - -- Desktop/Android: 3s max (fast execution) -- iOS: 8s max (stricter security, slower in iframes) - -## Fallback Behavior - -If Crisp never loads (timeout or failure): - -1. Loading spinner hides after timeout -2. Shows friendly error message: - - "Having trouble loading support chat" - - "Check your internet connection and try again" - - Retry button to try loading again - - Fallback email: support@peanut.me -3. User can retry, contact via email, or close drawer - -## Known Limitations - -1. **iOS PWA cookie blocking** - Cannot be fixed (iOS WKWebView limitation) -2. **Very slow networks** - Timeout may fire before Crisp loads on 2G (but user can retry) - -## Testing - -**iOS Safari:** - -- [ ] Visit `/support` → loads quickly -- [ ] Open drawer → loads quickly -- [ ] Fast WiFi: < 3s, Slow 3G: < 8s - -**Desktop/Android (no regression):** - -- [ ] Loads in < 3s as before diff --git a/docs/INVITE_GRAPH_PR.md b/docs/INVITE_GRAPH_PR.md deleted file mode 100644 index 18fe03a29..000000000 --- a/docs/INVITE_GRAPH_PR.md +++ /dev/null @@ -1,178 +0,0 @@ -# PR: Interactive Invite Graph Visualization - -## Overview - -Adds an interactive 2D force-directed graph visualization of all Peanut invites to the dev tools section. - -## Changes - -### Backend API (`peanut-api-ts/src/routes/invite.ts`) - -**New Endpoint**: `GET /invites/graph` (admin-only) -- Returns all invites in graph format (nodes + edges) -- Protected with `requireApiKey()` decorator -- Single optimized query with joins (no N+1) -- DRY refactor: Extracted node building logic to `addUserNode()` helper -- Proper error handling and logging - -**Query Performance**: -- Fetches all invites with `include` for inviter/invitee (efficient single query) -- Builds deduplicated node map in-memory -- Returns ~2.5MB of data for 5000 invites (acceptable for admin tool) - -### Frontend (`peanut-ui`) - -**New Page**: `/dev/invite-graph` -- Interactive force-directed graph using `react-force-graph-2d` -- Toggle username display -- Toggle points display (direct + transitive) -- Click user to filter to their tree (ancestors + descendants) -- Orphan nodes (no app access) displayed separately -- Performant for 3000+ nodes with WebGL acceleration - -**Dependencies**: -- Added `react-force-graph-2d` (2D-only version, no VR dependencies) -- Added `d3-force` for custom force configuration - -**Service Layer**: `pointsApi.getInvitesGraph(apiKey)` -- 30-second timeout with AbortController -- Proper error handling for timeout/network errors - -## Production Readiness - -### ✅ **APPROVED FOR PRODUCTION** - -**Security**: -- ✅ API key authentication required (admin-only) -- ✅ No PII exposure (only usernames, public points) -- ✅ API key not persisted (component state only) - -**Performance**: -- ✅ Single optimized DB query (no N+1) -- ✅ Acceptable memory footprint (~5MB client-side) -- ✅ WebGL canvas acceleration -- ✅ Request timeout (30s frontend) - -**Code Quality**: -- ✅ DRY refactoring applied (backend node building) -- ✅ Proper error handling -- ✅ TypeScript type safety -- ✅ Loading/error states -- ✅ Memory leak prevention (cleanup useEffect) - -**Testing**: -- Manual testing with admin API key required -- Verify graph renders correctly with real data -- Test tree filtering by clicking nodes -- Test zoom/pan controls -- Verify node clustering and spacing - -## Implementation Details - -### Force Simulation - -**Configuration** (applied once on initial mount): -- **Charge**: `-300` strength, `500px` distance max → even distribution -- **Link**: `80px` distance, `0.5` strength → spread out connections -- **Collision**: Dynamic radius based on node size → prevent overlap -- **Center**: Gentle gravity → keep graph compact -- **Particles**: Speed `0.0012` → smooth, visible flow from leaves to roots - -**Result**: Evenly distributed, spacious layout from the start - -### Data Structure - -```typescript -{ - nodes: Array<{ - id: string // userId - username: string - hasAppAccess: boolean - directPoints: number - transitivePoints: number - totalPoints: number - }>; - edges: Array<{ - id: string // invite ID - source: string // inviterId (reversed in frontend for particle flow) - target: string // inviteeId - type: 'DIRECT' | 'PAYMENT_LINK' - createdAt: string - }>; - stats: { - totalNodes: number - totalEdges: number - usersWithAccess: number - orphans: number - } -} -``` - -### Node Styling - -- **Size**: Based on total points (`baseSize + sqrt(points)/30`) -- **Color**: - - Purple (`#8b5cf6`) for users with app access - - Gray (`#9ca3af`) for orphans - - Yellow (`#fbbf24`) for selected node -- **Labels**: Username + points (shown at sufficient zoom level) - -### Edge Styling - -- **Direction**: Invitee → Inviter (reversed for particle flow) -- **Colors**: - - Purple (`rgba(139, 92, 246, 0.4)`) for DIRECT invites - - Pink (`rgba(236, 72, 153, 0.4)`) for PAYMENT_LINK invites -- **Width**: 1.5px for DIRECT, 1px for PAYMENT_LINK -- **Particles**: 2 particles flowing from leaves to roots (like fees/energy) - -### UI Features - -**Full-screen layout**: No header/sidebar, maximizes graph space -**Top control bar**: Title, stats, toggle buttons -**Legend**: Bottom-left, explains node/edge types -**Mobile controls**: Floating buttons for touch devices -**Selected user banner**: Shows filtering info when node is clicked -**Hover tooltips**: Clean, minimal design with user info - -## Files Changed - -``` -peanut-api-ts/src/routes/invite.ts | +63 (new endpoint + DRY) -peanut-ui/src/services/points.ts | +33 (new API function + timeout) -peanut-ui/src/app/(mobile-ui)/dev/invite-graph/page.tsx | +548 (NEW) -peanut-ui/src/app/(mobile-ui)/dev/page.tsx | +7 (add to tools list) -peanut-ui/src/types/react-force-graph.d.ts | +13 (d3-force types) -peanut-ui/src/constants/routes.ts | +1 (public route regex) -peanut-ui/src/context/authContext.tsx | +3 (skip user fetch) -peanut-ui/src/app/(mobile-ui)/layout.tsx | +5 (public route handling) -peanut-ui/package.json | +2 (dependencies) -peanut-ui/docs/INVITE_GRAPH_PRODUCTION_REVIEW.md | +145 (NEW) -``` - -## Usage - -1. Navigate to `/dev` in the app -2. Click on "Invite Graph" tool -3. Enter admin API key -4. Explore the graph: - - Zoom/pan to navigate - - Click nodes to filter to their tree - - Toggle Names/Points for different views - - Hover over nodes for detailed info - -## Future Optimizations (if needed) - -- Add Redis caching (5min TTL) if endpoint is hit frequently -- Add pagination if user count exceeds 10,000 -- Add data export button (CSV/JSON) for analysis -- Consider WebWorker for force simulation (if graph grows to 10k+ nodes) -- Add response compression middleware (gzip, ~70% reduction) - -## Notes - -- This is an admin-only tool, not user-facing -- Low traffic expected (internal use only) -- API key required for all operations -- Public route (no JWT auth) for easy admin access - diff --git a/docs/INVITE_GRAPH_PRODUCTION_REVIEW.md b/docs/INVITE_GRAPH_PRODUCTION_REVIEW.md deleted file mode 100644 index 18231c6a8..000000000 --- a/docs/INVITE_GRAPH_PRODUCTION_REVIEW.md +++ /dev/null @@ -1,132 +0,0 @@ -# Invite Graph Production Review - -## Security Issues - -### ✅ SAFE -1. **API Key Auth**: Backend endpoint properly requires `requireApiKey()` ✓ -2. **No PII exposure**: Only exposes usernames, public points data ✓ -3. **Admin-only**: Route is under `/dev` which is public but requires API key to fetch data ✓ - -### ⚠️ RECOMMENDATIONS -1. **API Key Storage**: Currently in component state - acceptable for admin tool but should NEVER be cached/stored -2. **Rate Limiting**: Consider adding rate limiting to `/invites/graph` endpoint (currently unlimited) - -## Performance Issues - -### Backend (`/invites/graph`) - -#### ❌ CRITICAL - Memory & Query Performance -```typescript -// Current: Fetches ALL invites with nested includes - O(n) query + O(n) memory -const invites = await prisma.invites.findMany({ - include: { inviter: { ... }, invitee: { ... } } -}) -``` - -**Problem**: For 3000+ users with 5000+ invites, this could be: -- 5000 rows × ~500 bytes = 2.5MB of data transferred -- No query optimization -- No caching -- Single query is good (no N+1), but result set is large - -**Solutions**: -1. ✅ **Keep as-is** - Query is actually efficient (single DB roundtrip with joins) -2. Add response compression (gzip) - reduces payload by ~70% -3. Add Redis caching with 5min TTL - most admin views don't need real-time data -4. Add pagination (if graph becomes too large in future) - -**Verdict**: ✅ **ACCEPTABLE for production** - Single optimized query, acceptable for admin tool - -### Frontend - -#### ❌ MODERATE - Large DOM/Canvas Elements -- Rendering 3000+ nodes on canvas is heavy but acceptable -- WebGL acceleration helps -- Force simulation runs in background thread - -**Memory profile**: -- 3000 nodes × 200 bytes ≈ 600KB in memory -- Canvas rendering: ~2-3MB GPU memory -- Force simulation: ~1MB working memory -- **Total: ~5MB - acceptable** - -#### ⚠️ Minor Improvements -1. Add cleanup in useEffect for graph ref -2. Memoize more callbacks to prevent re-renders -3. Consider debouncing toggle buttons (not critical - ref fixes this) - -## Code Quality (DRY) - -### Backend - Duplication Found - -#### ❌ Code Smell: Repeated Node Building Logic -```typescript -// Lines 392-403 and 405-415 - same logic repeated -if (!nodeMap.has(invite.inviter.userId)) { - nodeMap.set(invite.inviter.userId, { - id: invite.inviter.userId, - username: invite.inviter.username, - // ... repeated 6 times - }) -} -``` - -**Fix**: Extract to helper function - -### Frontend - Good Structure -- ✅ Proper component separation -- ✅ Custom hooks for adjacency logic -- ✅ Memoization with useMemo/useCallback -- ✅ Ref usage to prevent zoom resets - -## Production Readiness - -### Backend -- ✅ Error handling with try/catch -- ✅ Proper logging with `logger.error()` -- ✅ Transaction safety (not needed here, read-only) -- ✅ Type safety with Prisma types -- ⚠️ No request timeout (Fastify default: 30s - acceptable) -- ⚠️ No response size limit (Fastify default: 1MB - might need increase) - -### Frontend -- ✅ Loading states -- ✅ Error boundaries (global) -- ✅ SSR disabled (dynamic import) -- ✅ Type safety -- ⚠️ No request timeout on frontend fetch (browser default: varies) -- ⚠️ No retry logic on API failure - -## Recommendations for Production - -### HIGH PRIORITY -None - code is production-ready as-is for admin tool - -### MEDIUM PRIORITY -1. **Add response compression** (backend middleware) -2. **Extract DRY violation** (node building logic) -3. **Add request timeout** to frontend fetch (30s) - -### LOW PRIORITY (Future Optimization) -1. Add Redis caching (5min TTL) if endpoint is hit frequently -2. Add pagination if user count exceeds 10,000 -3. Add data export button (CSV/JSON) for analysis -4. Consider WebWorker for force simulation (if graph grows to 10k+ nodes) - -## Final Verdict - -### ✅ APPROVED FOR PRODUCTION - -**Reasoning**: -- No security vulnerabilities -- Single optimized DB query (no N+1) -- Acceptable memory footprint (~5MB) -- Proper error handling -- Admin-only tool (not user-facing, low traffic) - -**Action Items**: -- [x] Review complete -- [ ] Implement DRY refactor (optional) -- [ ] Add response compression (recommended) -- [ ] Test with production data size - From 939a8017e38972f4d8a366c8c5dd4df79bbdb4ba Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 13 Nov 2025 16:28:40 -0300 Subject: [PATCH 058/121] chore: remove duplicate redirect logic on login page --- src/components/Setup/Views/Landing.tsx | 36 -------------------------- 1 file changed, 36 deletions(-) diff --git a/src/components/Setup/Views/Landing.tsx b/src/components/Setup/Views/Landing.tsx index 260c24811..7f154dbb3 100644 --- a/src/components/Setup/Views/Landing.tsx +++ b/src/components/Setup/Views/Landing.tsx @@ -2,51 +2,15 @@ import { Button, Card } from '@/components/0_Bruddle' import { useToast } from '@/components/0_Bruddle/Toast' -import { useAuth } from '@/context/authContext' import { useSetupFlow } from '@/hooks/useSetupFlow' import { useLogin } from '@/hooks/useLogin' -import { getRedirectUrl, sanitizeRedirectURL, clearRedirectUrl } from '@/utils' import * as Sentry from '@sentry/nextjs' -import { useRouter, useSearchParams } from 'next/navigation' -import { useEffect } from 'react' import Link from 'next/link' const LandingStep = () => { const { handleNext } = useSetupFlow() const { handleLoginClick, isLoggingIn } = useLogin() - const { user } = useAuth() - const { push } = useRouter() const toast = useToast() - const searchParams = useSearchParams() - - useEffect(() => { - if (!!user) { - const localStorageRedirect = getRedirectUrl() - const redirect_uri = searchParams.get('redirect_uri') - if (redirect_uri) { - const sanitizedRedirectUrl = sanitizeRedirectURL(redirect_uri) - // Only redirect if the URL is safe (same-origin) - if (sanitizedRedirectUrl) { - push(sanitizedRedirectUrl) - } else { - // Reject external redirects, go to home instead - push('/home') - } - } else if (localStorageRedirect) { - clearRedirectUrl() - const sanitizedLocalRedirect = sanitizeRedirectURL(localStorageRedirect) - // Only redirect if the URL is safe (same-origin) - if (sanitizedLocalRedirect) { - push(sanitizedLocalRedirect) - } else { - // Reject external redirects, go to home instead - push('/home') - } - } else { - push('/home') - } - } - }, [user, push, searchParams]) const handleError = (error: any) => { const errorMessage = From c919b65d70120c134f144c536f03cb88662acc3f Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 17:01:11 -0300 Subject: [PATCH 059/121] fix api match --- next.config.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/next.config.js b/next.config.js index b0d966e43..f5b3ebdaa 100644 --- a/next.config.js +++ b/next.config.js @@ -206,6 +206,14 @@ if (process.env.NODE_ENV !== 'development') { const withSerwist = (await import('@serwist/next')).default({ swSrc: './src/app/sw.ts', swDest: 'public/sw.js', + // Inject environment variables into Service Worker build context + // Without this, SW uses hardcoded fallbacks and won't match staging/prod API URLs + define: { + 'process.env.NEXT_PUBLIC_PEANUT_API_URL': JSON.stringify( + process.env.PEANUT_API_URL || process.env.NEXT_PUBLIC_PEANUT_API_URL || 'https://api.peanut.me' + ), + 'process.env.NEXT_PUBLIC_API_VERSION': JSON.stringify(process.env.NEXT_PUBLIC_API_VERSION || 'v1'), + }, }) // Wrap both Serwist AND bundle analyzer return withSerwist(withBundleAnalyzer(nextConfig)) From 7d29cf10a71dbb0d9ef9fc1c85c24b06b20459f0 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 17:04:40 -0300 Subject: [PATCH 060/121] fix --- next.config.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/next.config.js b/next.config.js index f5b3ebdaa..e83348b28 100644 --- a/next.config.js +++ b/next.config.js @@ -75,13 +75,25 @@ let nextConfig = { webpackBuildWorker: true, }, - webpack: (config, { isServer, dev }) => { + webpack: (config, { isServer, dev, webpack }) => { if (!dev || !process.env.NEXT_TURBO) { if (isServer) { config.ignoreWarnings = [{ module: /@opentelemetry\/instrumentation/, message: /Critical dependency/ }] } } + // CRITICAL: Inject environment variables into Service Worker build + // Service Workers are isolated from the main app bundle and don't get NEXT_PUBLIC_* vars automatically + // This ensures SW can match the correct API hostname (staging vs prod) + config.plugins.push( + new webpack.DefinePlugin({ + 'process.env.NEXT_PUBLIC_PEANUT_API_URL': JSON.stringify( + process.env.PEANUT_API_URL || process.env.NEXT_PUBLIC_PEANUT_API_URL || 'https://api.peanut.me' + ), + 'process.env.NEXT_PUBLIC_API_VERSION': JSON.stringify(process.env.NEXT_PUBLIC_API_VERSION || 'v1'), + }) + ) + return config }, reactStrictMode: false, @@ -206,14 +218,6 @@ if (process.env.NODE_ENV !== 'development') { const withSerwist = (await import('@serwist/next')).default({ swSrc: './src/app/sw.ts', swDest: 'public/sw.js', - // Inject environment variables into Service Worker build context - // Without this, SW uses hardcoded fallbacks and won't match staging/prod API URLs - define: { - 'process.env.NEXT_PUBLIC_PEANUT_API_URL': JSON.stringify( - process.env.PEANUT_API_URL || process.env.NEXT_PUBLIC_PEANUT_API_URL || 'https://api.peanut.me' - ), - 'process.env.NEXT_PUBLIC_API_VERSION': JSON.stringify(process.env.NEXT_PUBLIC_API_VERSION || 'v1'), - }, }) // Wrap both Serwist AND bundle analyzer return withSerwist(withBundleAnalyzer(nextConfig)) From 3ee71b8c650ead763bca9ece43a22bbb0ab356da Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 13 Nov 2025 17:05:55 -0300 Subject: [PATCH 061/121] allow 3 decimals places in amount field --- src/components/Global/TokenAmountInput/index.tsx | 11 ++++++----- .../Request/link/views/Create.request.link.view.tsx | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx index 341de9c62..1f992f211 100644 --- a/src/components/Global/TokenAmountInput/index.tsx +++ b/src/components/Global/TokenAmountInput/index.tsx @@ -176,7 +176,7 @@ const TokenAmountInput = ({ } const selectedAmountStr = parseFloat(selectedAmount.toFixed(4)).toString() - const maxDecimals = displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 2 : decimals + const maxDecimals = displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 6 : decimals const formattedAmount = formatTokenAmount(selectedAmountStr, maxDecimals, true) if (formattedAmount) { onChange(formattedAmount, isInputUsd) @@ -200,7 +200,8 @@ const TokenAmountInput = ({ if (!isInitialInputUsd) { const value = tokenValue ? Number(tokenValue) : 0 - const formattedValue = (value * (currency?.price ?? 1)).toFixed(2) + const calculatedValue = value * (currency?.price ?? 1) + const formattedValue = formatTokenAmount(calculatedValue, 6) ?? '0' onChange(formattedValue, isInputUsd) } else { onChange(displayValue, isInputUsd) @@ -277,7 +278,7 @@ const TokenAmountInput = ({ // Sync default slider suggested amount to the input useEffect(() => { if (defaultSliderSuggestedAmount) { - const formattedAmount = formatTokenAmount(defaultSliderSuggestedAmount.toString(), 2) + const formattedAmount = formatTokenAmount(defaultSliderSuggestedAmount.toString(), 6) if (formattedAmount) { setTokenValue(formattedAmount) setDisplayValue(formattedAmount) @@ -304,9 +305,9 @@ const TokenAmountInput = ({ placeholder={'0.00'} onChange={(e) => { let value = e.target.value - // USD/currency → 2 decimals; token input → allow `decimals` (<= 6) + // USD/currency → 6 decimals; token input → allow `decimals` (<= 6) const maxDecimals = - displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 2 : decimals + displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 6 : decimals const formattedAmount = formatTokenAmount(value, maxDecimals, true) if (formattedAmount !== undefined) { value = formattedAmount diff --git a/src/components/Request/link/views/Create.request.link.view.tsx b/src/components/Request/link/views/Create.request.link.view.tsx index 80a64e634..8abd4156d 100644 --- a/src/components/Request/link/views/Create.request.link.view.tsx +++ b/src/components/Request/link/views/Create.request.link.view.tsx @@ -39,7 +39,7 @@ export const CreateRequestLinkView = () => { // Sanitize amount and limit to 2 decimal places const sanitizedAmount = useMemo(() => { if (!paramsAmount || isNaN(parseFloat(paramsAmount))) return '' - return formatTokenAmount(paramsAmount, 2) ?? '' + return formatTokenAmount(paramsAmount, 6) ?? '' }, [paramsAmount]) const merchant = searchParams.get('merchant') const merchantComment = merchant ? `Bill split for ${merchant}` : null From 82fde16d26e66b8164a95be74e1a87a28832db8f Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 13 Nov 2025 17:10:21 -0300 Subject: [PATCH 062/121] Update info card variants --- src/app/(mobile-ui)/add-money/[country]/bank/page.tsx | 2 +- src/app/(mobile-ui)/add-money/crypto/direct/page.tsx | 2 +- src/components/AddMoney/components/AddMoneyBankDetails.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx index a54a02b5c..a1caf70eb 100644 --- a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx +++ b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx @@ -344,7 +344,7 @@ export default function OnrampBankPage() { /> diff --git a/src/app/(mobile-ui)/add-money/crypto/direct/page.tsx b/src/app/(mobile-ui)/add-money/crypto/direct/page.tsx index e31365526..ec7b193ed 100644 --- a/src/app/(mobile-ui)/add-money/crypto/direct/page.tsx +++ b/src/app/(mobile-ui)/add-money/crypto/direct/page.tsx @@ -88,7 +88,7 @@ export default function AddMoneyCryptoDirectPage() { />

- + @@ -241,7 +241,7 @@ Please use these details to complete your bank transfer.`
Date: Thu, 13 Nov 2025 17:17:55 -0300 Subject: [PATCH 063/121] fix: code rabbit comments --- src/app/(mobile-ui)/qr-pay/page.tsx | 6 +++--- src/services/manteca.ts | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index 3ae5befa0..2401151e6 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -585,6 +585,7 @@ export default function QRPayPage() { callGasLimit: signedUserOpData.signedUserOp.callGasLimit, verificationGasLimit: signedUserOpData.signedUserOp.verificationGasLimit, preVerificationGas: signedUserOpData.signedUserOp.preVerificationGas, + initCode: signedUserOpData.signedUserOp.initCode, maxFeePerGas: signedUserOpData.signedUserOp.maxFeePerGas, maxPriorityFeePerGas: signedUserOpData.signedUserOp.maxPriorityFeePerGas, paymaster: signedUserOpData.signedUserOp.paymaster, @@ -607,13 +608,12 @@ export default function QRPayPage() { // Handle specific error cases if (errorMsg.toLowerCase().includes('nonce')) { setErrorMessage( - 'Transaction failed due to account state change. Please try again. If the problem persists, contact support.u' + 'Transaction failed due to account state change. Please try again. If the problem persists, contact support.' ) } else if (errorMsg.toLowerCase().includes('expired') || errorMsg.toLowerCase().includes('stale')) { setErrorMessage('Payment session expired. Please scan the QR code again.') } else { - setErrorMessage((error as Error).toString()) - //setErrorMessage('Could not complete payment. Please contact support.') + setErrorMessage('Could not complete payment. Please contact support.') } setIsSuccess(false) } finally { diff --git a/src/services/manteca.ts b/src/services/manteca.ts index 507a184a7..31441b1aa 100644 --- a/src/services/manteca.ts +++ b/src/services/manteca.ts @@ -175,6 +175,7 @@ export const mantecaApi = { | 'paymasterData' | 'paymasterVerificationGasLimit' | 'paymasterPostOpGasLimit' + | 'initCode' > chainId: string entryPointAddress: Address From f09311b0e95819240defca2dab1e57ccc60d6b54 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Thu, 13 Nov 2025 17:18:20 -0300 Subject: [PATCH 064/121] feat: arbiverse badge copy --- public/badges/arbiverse_devconnect.svg | 41 ++++++++++++ src/components/Badges/badge.utils.ts | 4 +- src/components/Invites/InvitesPage.tsx | 86 +++++++++++++++++++++----- 3 files changed, 116 insertions(+), 15 deletions(-) create mode 100644 public/badges/arbiverse_devconnect.svg diff --git a/public/badges/arbiverse_devconnect.svg b/public/badges/arbiverse_devconnect.svg new file mode 100644 index 000000000..94bdc8b18 --- /dev/null +++ b/public/badges/arbiverse_devconnect.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Badges/badge.utils.ts b/src/components/Badges/badge.utils.ts index 706a76ca5..aa6956336 100644 --- a/src/components/Badges/badge.utils.ts +++ b/src/components/Badges/badge.utils.ts @@ -12,6 +12,7 @@ const CODE_TO_PATH: Record = { MOST_INVITES: '/badges/most_invites.svg', BIGGEST_REQUEST_POT: '/badges/biggest_request_pot.svg', SEEDLING_DEVCONNECT_BA_2025: '/badges/seedlings_devconnect.svg', + ARBIVERSE_DEVCONNECT_BA_2025: '/badges/arbiverse_devconnect.svg', } // public-facing descriptions for badges (third-person perspective) @@ -25,7 +26,8 @@ const PUBLIC_DESCRIPTIONS: Record = { MOST_PAYMENTS_DEVCON: `Money Machine - They move money like it's light work. Most payments made!`, MOST_INVITES: 'Onboarded more users than Coinbase ads!', BIGGEST_REQUEST_POT: 'High Roller or Master Beggar? They created the pot with the highest number of contributors.', - SEEDLING_DEVCONNECT_BA_2025: 'Peanut Ambassador. You spread the word and brought others into the ecosystem.', + SEEDLING_DEVCONNECT_BA_2025: 'Peanut Ambassador. They spread the word and brought others into the ecosystem.', + ARBIVERSE_DEVCONNECT_BA_2025: 'Peanut 🤝 Arbiverse. They joined us at the amazing Arbiverse booth during Devconnect 2025.', } export function getBadgeIcon(code?: string) { diff --git a/src/components/Invites/InvitesPage.tsx b/src/components/Invites/InvitesPage.tsx index f58454251..96735e567 100644 --- a/src/components/Invites/InvitesPage.tsx +++ b/src/components/Invites/InvitesPage.tsx @@ -1,5 +1,5 @@ 'use client' -import React, { Suspense, useEffect } from 'react' +import { Suspense, useEffect, useRef, useState } from 'react' import PeanutLoading from '../Global/PeanutLoading' import ValidationErrorView from '../Payment/Views/Error.validation.view' import InvitesPageLayout from './InvitesPageLayout' @@ -17,16 +17,30 @@ import { saveToCookie } from '@/utils' import { useLogin } from '@/hooks/useLogin' import UnsupportedBrowserModal from '../Global/UnsupportedBrowserModal' +// mapping of special invite codes to their campaign tags +// when these invite codes are used, the corresponding campaign tag is automatically applied +const INVITE_CODE_TO_CAMPAIGN_MAP: Record = { + arbiverseinvitesyou: 'ARBIVERSE_DEVCONNECT_BA_2025', +} + function InvitePageContent() { const searchParams = useSearchParams() - const inviteCode = searchParams.get('code') + const inviteCode = searchParams.get('code')?.toLowerCase() const redirectUri = searchParams.get('redirect_uri') - const campaign = searchParams.get('campaign') - const { user, isFetchingUser } = useAuth() + const campaignParam = searchParams.get('campaign') + const { user, isFetchingUser, fetchUser } = useAuth() + + // determine campaign tag: use query param if provided, otherwise check invite code mapping + const campaign = campaignParam || (inviteCode ? INVITE_CODE_TO_CAMPAIGN_MAP[inviteCode] : undefined) const dispatch = useAppDispatch() const router = useRouter() const { handleLoginClick, isLoggingIn } = useLogin() + const [isAwardingBadge, setIsAwardingBadge] = useState(false) + const hasStartedAwardingRef = useRef(false) + + // Track if we should show content (prevents flash) + const [shouldShowContent, setShouldShowContent] = useState(false) const { data: inviteCodeData, @@ -38,26 +52,65 @@ function InvitePageContent() { enabled: !!inviteCode, }) - // Redirect logged-in users who already have app access to the inviter's profile - // Users without app access should stay on this page to claim the invite and get access + // determine if we should show content based on user state + useEffect(() => { + // if still fetching user, don't show content yet + if (isFetchingUser) { + setShouldShowContent(false) + return + } + + // if user has app access and no redirect URI, they'll be redirected + // don't show content in this case + if (!redirectUri && user?.user?.hasAppAccess && !isError) { + setShouldShowContent(false) + return + } + + // otherwise, safe to show content + setShouldShowContent(true) + }, [user, isFetchingUser, redirectUri, isError]) + + // redirect logged-in users who already have app access + // users without app access should stay on this page to claim the invite and get access useEffect(() => { - // Wait for both user and invite data to be loaded + // wait for both user and invite data to be loaded if (!user?.user || !inviteCodeData || isLoading || isFetchingUser) { return } - // If user has app access and invite is valid, redirect to inviter's profile, if a campaign is provided, award the badge and redirect to the home page + // prevent running the effect multiple times (ref doesn't trigger re-renders) + if (hasStartedAwardingRef.current) { + return + } + + // if user has app access and invite is valid, handle redirect if (!redirectUri && user.user.hasAppAccess && inviteCodeData.success && inviteCodeData.username) { - // If the potential ambassador is already a peanut user, simply award the badge and redirect to the home page + // if campaign is present, award the badge and redirect to home if (campaign) { - invitesApi.awardBadge(campaign).then(() => { - router.push('/home') - }) + hasStartedAwardingRef.current = true + setIsAwardingBadge(true) + invitesApi + .awardBadge(campaign) + .then(async () => { + // refetch user data to get the newly awarded badge + await fetchUser() + router.push('/home') + }) + .catch(async () => { + // if badge awarding fails, still refetch and redirect + await fetchUser() + router.push('/home') + }) + .finally(() => { + setIsAwardingBadge(false) + }) } else { + // no campaign, just redirect to inviter's profile router.push(`/${inviteCodeData.username}`) } } - }, [user, inviteCodeData, isLoading, isFetchingUser, router, campaign, redirectUri]) + }, [user, inviteCodeData, isLoading, isFetchingUser, router, campaign, redirectUri, fetchUser]) const handleClaimInvite = async () => { if (inviteCode) { @@ -76,7 +129,12 @@ function InvitePageContent() { } } - if (isLoading || isFetchingUser) { + // show loading if: + // 1. user data is being fetched + // 2. badge is being awarded + // 3. invite code is being validated + // 4. we determined content shouldn't be shown yet + if (isFetchingUser || isAwardingBadge || isLoading || !shouldShowContent) { return } From 514af3b38c4dcdbf1499ce8602b5cf2949ecd1c4 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 13 Nov 2025 17:18:43 -0300 Subject: [PATCH 065/121] reduce gap --- src/components/TransactionDetails/TransactionCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TransactionDetails/TransactionCard.tsx b/src/components/TransactionDetails/TransactionCard.tsx index 2f83a8daf..8fdeb0f6d 100644 --- a/src/components/TransactionDetails/TransactionCard.tsx +++ b/src/components/TransactionDetails/TransactionCard.tsx @@ -154,7 +154,7 @@ const TransactionCard: React.FC = ({
{/* display the action icon and type text */} -
+
{getActionIcon(type, transaction.direction)} {isPerkReward ? 'Refund' : getActionText(type)} {status && } From b70b9fa5c3cd1e8ab574d8adb3e074ccef48ed8b Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Thu, 13 Nov 2025 17:22:23 -0300 Subject: [PATCH 066/121] chore: format style --- src/components/Badges/badge.utils.ts | 3 ++- src/components/Invites/InvitesPage.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Badges/badge.utils.ts b/src/components/Badges/badge.utils.ts index aa6956336..37e2aba0e 100644 --- a/src/components/Badges/badge.utils.ts +++ b/src/components/Badges/badge.utils.ts @@ -27,7 +27,8 @@ const PUBLIC_DESCRIPTIONS: Record = { MOST_INVITES: 'Onboarded more users than Coinbase ads!', BIGGEST_REQUEST_POT: 'High Roller or Master Beggar? They created the pot with the highest number of contributors.', SEEDLING_DEVCONNECT_BA_2025: 'Peanut Ambassador. They spread the word and brought others into the ecosystem.', - ARBIVERSE_DEVCONNECT_BA_2025: 'Peanut 🤝 Arbiverse. They joined us at the amazing Arbiverse booth during Devconnect 2025.', + ARBIVERSE_DEVCONNECT_BA_2025: + 'Peanut 🤝 Arbiverse. They joined us at the amazing Arbiverse booth during Devconnect 2025.', } export function getBadgeIcon(code?: string) { diff --git a/src/components/Invites/InvitesPage.tsx b/src/components/Invites/InvitesPage.tsx index 96735e567..61a35a25e 100644 --- a/src/components/Invites/InvitesPage.tsx +++ b/src/components/Invites/InvitesPage.tsx @@ -38,7 +38,7 @@ function InvitePageContent() { const { handleLoginClick, isLoggingIn } = useLogin() const [isAwardingBadge, setIsAwardingBadge] = useState(false) const hasStartedAwardingRef = useRef(false) - + // Track if we should show content (prevents flash) const [shouldShowContent, setShouldShowContent] = useState(false) From 6b5d3b02499e490e565be2752b0c3c30a6d95437 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 13 Nov 2025 17:24:42 -0300 Subject: [PATCH 067/121] update copy and kill profile share drawer in profile page --- .../Profile/components/ProfileHeader.tsx | 28 +++---------------- src/components/UserHeader/index.tsx | 2 +- 2 files changed, 5 insertions(+), 25 deletions(-) diff --git a/src/components/Profile/components/ProfileHeader.tsx b/src/components/Profile/components/ProfileHeader.tsx index b89d385b8..5aa26fef1 100644 --- a/src/components/Profile/components/ProfileHeader.tsx +++ b/src/components/Profile/components/ProfileHeader.tsx @@ -1,13 +1,9 @@ import { Button } from '@/components/0_Bruddle' -import Divider from '@/components/0_Bruddle/Divider' import { BASE_URL } from '@/components/Global/DirectSendQR/utils' import { Icon } from '@/components/Global/Icons/Icon' -import QRCodeWrapper from '@/components/Global/QRCodeWrapper' -import ShareButton from '@/components/Global/ShareButton' import React, { useState } from 'react' import { twMerge } from 'tailwind-merge' import AvatarWithBadge from '../AvatarWithBadge' -import { Drawer, DrawerContent, DrawerTitle } from '@/components/Global/Drawer' import { VerifiedUserLabel } from '@/components/UserHeader' import { useAuth } from '@/context/authContext' import useKycStatus from '@/hooks/useKycStatus' @@ -65,8 +61,10 @@ const ProfileHeader: React.FC = ({ shadowSize="4" className="flex h-10 w-fit items-center justify-center rounded-full py-3 pl-6 pr-4" onClick={() => { - navigator.clipboard.writeText(profileUrl) - setIsDrawerOpen(true) + // navigator.clipboard.writeText(profileUrl) + navigator.share({ + url: profileUrl, + }) }} >
{profileUrl.replace('https://', '')}
@@ -76,24 +74,6 @@ const ProfileHeader: React.FC = ({ )}
- {isDrawerOpen && ( - <> - - - -

Your Peanut profile is public

-

Share it to receive payments!

- - - - - - Share Profile link - - - - - )} ) } diff --git a/src/components/UserHeader/index.tsx b/src/components/UserHeader/index.tsx index 1c31790c7..9467e786f 100644 --- a/src/components/UserHeader/index.tsx +++ b/src/components/UserHeader/index.tsx @@ -111,7 +111,7 @@ export const VerifiedUserLabel = ({ {(isInvitedByLoggedInUser || isInviter) && ( From 510d1d0b564377f1311fe08f8a843d2b8afdcc45 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Thu, 13 Nov 2025 17:34:44 -0300 Subject: [PATCH 068/121] fix: error state --- src/components/Invites/InvitesPage.tsx | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/Invites/InvitesPage.tsx b/src/components/Invites/InvitesPage.tsx index 61a35a25e..08f56ff26 100644 --- a/src/components/Invites/InvitesPage.tsx +++ b/src/components/Invites/InvitesPage.tsx @@ -60,16 +60,22 @@ function InvitePageContent() { return } - // if user has app access and no redirect URI, they'll be redirected - // don't show content in this case - if (!redirectUri && user?.user?.hasAppAccess && !isError) { + // if invite validation is still loading, don't show content yet + if (isLoading) { setShouldShowContent(false) return } - // otherwise, safe to show content + // if user has app access AND invite is valid, they'll be redirected + // don't show content in this case (show loading instead) + if (!redirectUri && user?.user?.hasAppAccess && inviteCodeData?.success) { + setShouldShowContent(false) + return + } + + // otherwise, safe to show content (either error view or invite screen) setShouldShowContent(true) - }, [user, isFetchingUser, redirectUri, isError]) + }, [user, isFetchingUser, redirectUri, inviteCodeData, isLoading]) // redirect logged-in users who already have app access // users without app access should stay on this page to claim the invite and get access @@ -130,11 +136,9 @@ function InvitePageContent() { } // show loading if: - // 1. user data is being fetched - // 2. badge is being awarded - // 3. invite code is being validated - // 4. we determined content shouldn't be shown yet - if (isFetchingUser || isAwardingBadge || isLoading || !shouldShowContent) { + // 1. badge is being awarded + // 2. we determined content shouldn't be shown yet (covers user fetching + invite validation) + if (isAwardingBadge || !shouldShowContent) { return } From e353b9fca6e772c81a92a680e6e78894c02c7a6c Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 13 Nov 2025 17:36:05 -0300 Subject: [PATCH 069/121] fix: icon alignment --- src/components/Global/InfoCard/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Global/InfoCard/index.tsx b/src/components/Global/InfoCard/index.tsx index 18ad57733..59beec739 100644 --- a/src/components/Global/InfoCard/index.tsx +++ b/src/components/Global/InfoCard/index.tsx @@ -51,7 +51,14 @@ const InfoCard = ({ return (
- {icon && } + {icon && ( + + )}
{title && {title}} {description && ( From e31297f7c5aceca7e0422083562dc178f2c6e5a5 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 17:38:35 -0300 Subject: [PATCH 070/121] hmm --- src/app/sw.ts | 60 ++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 45 insertions(+), 15 deletions(-) diff --git a/src/app/sw.ts b/src/app/sw.ts index 2eac4cd37..6908ca203 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -133,55 +133,55 @@ const serwist = new Serwist({ { matcher: ({ request, url }) => request.mode === 'navigate' && url.pathname === '/home', handler: new NetworkFirst({ - cacheName: 'navigation-home', // Isolated cache for protection + cacheName: 'navigation-home', plugins: [ new CacheableResponsePlugin({ - statuses: [200], + statuses: [0, 200], // 0 = opaque responses, 200 = success }), new ExpirationPlugin({ - maxEntries: 1, // Only /home - maxAgeSeconds: TIME.THIRTY_DAYS, // 30 days (long TTL) + maxEntries: 1, + maxAgeSeconds: TIME.THIRTY_DAYS, }), ], + networkTimeoutSeconds: 3, // Fallback to cache after 3s network timeout }), }, // 🟡 TIER 2 (IMPORTANT): Key pages - Evict before /home - // Pages users visit regularly: history, profile, points - // Separate cache protects from being evicted with random pages { matcher: ({ request, url }) => request.mode === 'navigate' && ['/history', '/profile', '/points'].some((path) => url.pathname.startsWith(path)), handler: new NetworkFirst({ - cacheName: 'navigation-important', // Medium priority cache + cacheName: 'navigation-important', plugins: [ new CacheableResponsePlugin({ - statuses: [200], + statuses: [0, 200], }), new ExpirationPlugin({ - maxEntries: 3, // 3 important pages - maxAgeSeconds: TIME.ONE_WEEK, // 1 week + maxEntries: 3, + maxAgeSeconds: TIME.ONE_WEEK, }), ], + networkTimeoutSeconds: 3, }), }, // 🟢 TIER 3 (LOW): All other pages - Evict first - // Random pages, settings, etc. Nice-to-have offline but not critical { matcher: ({ request }) => request.mode === 'navigate', handler: new NetworkFirst({ - cacheName: 'navigation-other', // Low priority cache + cacheName: 'navigation-other', plugins: [ new CacheableResponsePlugin({ - statuses: [200], + statuses: [0, 200], }), new ExpirationPlugin({ - maxEntries: 6, // 6 miscellaneous pages - maxAgeSeconds: TIME.ONE_DAY, // 1 day (short TTL) + maxEntries: 6, + maxAgeSeconds: TIME.ONE_DAY, }), ], + networkTimeoutSeconds: 3, }), }, @@ -553,3 +553,33 @@ self.addEventListener('message', (event) => { }) serwist.addEventListeners() + +// Debug logging for navigation requests (non-interfering) +self.addEventListener('fetch', (event) => { + if (event.request.mode === 'navigate') { + const url = new URL(event.request.url) + console.log('[SW] 🔍 Navigation request:', url.pathname) + } +}) + +// Monitor cache writes +self.addEventListener('message', (event) => { + if (event.data?.type === 'CHECK_CACHES') { + ;(async () => { + const cacheNames = await caches.keys() + const cacheContents = {} + + for (const name of cacheNames) { + const cache = await caches.open(name) + const keys = await cache.keys() + cacheContents[name] = keys.map((req) => req.url) + } + + console.log('[SW] 📦 Cache contents:', cacheContents) + + if (event.ports[0]) { + event.ports[0].postMessage({ caches: cacheContents }) + } + })() + } +}) From 591fbf2a89b4d28b73e11e2f09d6327037f9144b Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 17:58:19 -0300 Subject: [PATCH 071/121] redux persistence --- package.json | 1 + pnpm-lock.yaml | 52 ++++++++++++++++++++++++++++++---- src/app/(mobile-ui)/layout.tsx | 31 +++++++++++++++++--- src/config/peanut.config.tsx | 17 +++++++---- src/context/authContext.tsx | 13 +++++++++ src/hooks/query/user.ts | 8 +++--- src/redux/store.ts | 30 ++++++++++++++++++-- 7 files changed, 131 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 0b93f9a03..04e830b71 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "react-redux": "^9.2.0", "react-tooltip": "^5.28.0", "redux": "^5.0.1", + "redux-persist": "^6.0.0", "siwe": "^2.3.2", "tailwind-merge": "^1.14.0", "tailwind-scrollbar": "^3.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e625f25e8..1dd116ad8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -34,7 +34,7 @@ importers: version: 2.0.4 '@daimo/pay': specifier: ^1.16.5 - version: 1.16.5(aab9c1b916d14222248b36333fb0cd5f) + version: 1.16.5(0133d12034a313dd0ab10c88bd8ab5d6) '@dicebear/collection': specifier: ^9.2.2 version: 9.2.4(@dicebear/core@9.2.4) @@ -194,6 +194,9 @@ importers: redux: specifier: ^5.0.1 version: 5.0.1 + redux-persist: + specifier: ^6.0.0 + version: 6.0.0(react@19.1.1)(redux@5.0.1) siwe: specifier: ^2.3.2 version: 2.3.2(ethers@5.7.2(bufferutil@4.0.9)(utf-8-validate@5.0.10)) @@ -6811,6 +6814,15 @@ packages: resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==} engines: {node: '>=8'} + redux-persist@6.0.0: + resolution: {integrity: sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==} + peerDependencies: + react: '>=16' + redux: '>4.0.0' + peerDependenciesMeta: + react: + optional: true + redux-thunk@3.1.0: resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==} peerDependencies: @@ -8849,11 +8861,11 @@ snapshots: - typescript - utf-8-validate - '@daimo/pay@1.16.5(aab9c1b916d14222248b36333fb0cd5f)': + '@daimo/pay@1.16.5(0133d12034a313dd0ab10c88bd8ab5d6)': dependencies: '@daimo/pay-common': 1.16.5(bufferutil@4.0.9)(typescript@5.9.2)(utf-8-validate@5.0.10) '@solana/wallet-adapter-base': 0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10)) - '@solana/wallet-adapter-react': 0.15.39(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@5.0.0)(react-native@0.81.0(@babel/core@7.28.3)(@react-native/metro-config@0.81.0(@babel/core@7.28.3))(@types/react@18.3.23)(bufferutil@4.0.9)(react@19.1.1)(utf-8-validate@5.0.10))(react@19.1.1) + '@solana/wallet-adapter-react': 0.15.39(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@6.0.0)(react-native@0.81.0(@babel/core@7.28.3)(@react-native/metro-config@0.81.0(@babel/core@7.28.3))(@types/react@18.3.23)(bufferutil@4.0.9)(react@19.1.1)(utf-8-validate@5.0.10))(react@19.1.1) '@solana/web3.js': 1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10) '@tanstack/react-query': 5.8.4(react-dom@19.1.1(react@19.1.1))(react-native@0.81.0(@babel/core@7.28.3)(@react-native/metro-config@0.81.0(@babel/core@7.28.3))(@types/react@18.3.23)(bufferutil@4.0.9)(react@19.1.1)(utf-8-validate@5.0.10))(react@19.1.1) '@trpc/client': 11.5.0(@trpc/server@11.5.0(typescript@5.9.2))(typescript@5.9.2) @@ -12020,11 +12032,11 @@ snapshots: '@wallet-standard/features': 1.1.0 eventemitter3: 5.0.1 - '@solana/wallet-adapter-react@0.15.39(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@5.0.0)(react-native@0.81.0(@babel/core@7.28.3)(@react-native/metro-config@0.81.0(@babel/core@7.28.3))(@types/react@18.3.23)(bufferutil@4.0.9)(react@19.1.1)(utf-8-validate@5.0.10))(react@19.1.1)': + '@solana/wallet-adapter-react@0.15.39(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@6.0.0)(react-native@0.81.0(@babel/core@7.28.3)(@react-native/metro-config@0.81.0(@babel/core@7.28.3))(@types/react@18.3.23)(bufferutil@4.0.9)(react@19.1.1)(utf-8-validate@5.0.10))(react@19.1.1)': dependencies: '@solana-mobile/wallet-adapter-mobile': 2.2.3(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(react-native@0.81.0(@babel/core@7.28.3)(@react-native/metro-config@0.81.0(@babel/core@7.28.3))(@types/react@18.3.23)(bufferutil@4.0.9)(react@19.1.1)(utf-8-validate@5.0.10))(react@19.1.1) '@solana/wallet-adapter-base': 0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10)) - '@solana/wallet-standard-wallet-adapter-react': 1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.1.1) + '@solana/wallet-standard-wallet-adapter-react': 1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@6.0.0)(react@19.1.1) '@solana/web3.js': 1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10) react: 19.1.1 transitivePeerDependencies: @@ -12065,6 +12077,19 @@ snapshots: '@wallet-standard/wallet': 1.1.0 bs58: 5.0.0 + '@solana/wallet-standard-wallet-adapter-base@1.1.4(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@6.0.0)': + dependencies: + '@solana/wallet-adapter-base': 0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10)) + '@solana/wallet-standard-chains': 1.1.1 + '@solana/wallet-standard-features': 1.3.0 + '@solana/wallet-standard-util': 1.1.2 + '@solana/web3.js': 1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10) + '@wallet-standard/app': 1.1.0 + '@wallet-standard/base': 1.1.0 + '@wallet-standard/features': 1.1.0 + '@wallet-standard/wallet': 1.1.0 + bs58: 6.0.0 + '@solana/wallet-standard-wallet-adapter-react@1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.1.1)': dependencies: '@solana/wallet-adapter-base': 0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10)) @@ -12076,6 +12101,17 @@ snapshots: - '@solana/web3.js' - bs58 + '@solana/wallet-standard-wallet-adapter-react@1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@6.0.0)(react@19.1.1)': + dependencies: + '@solana/wallet-adapter-base': 0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10)) + '@solana/wallet-standard-wallet-adapter-base': 1.1.4(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@6.0.0) + '@wallet-standard/app': 1.1.0 + '@wallet-standard/base': 1.1.0 + react: 19.1.1 + transitivePeerDependencies: + - '@solana/web3.js' + - bs58 + '@solana/wallet-standard-wallet-adapter@1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.1.1)': dependencies: '@solana/wallet-standard-wallet-adapter-base': 1.1.4(@solana/web3.js@1.98.4(bufferutil@4.0.9)(encoding@0.1.13)(typescript@5.9.2)(utf-8-validate@5.0.10))(bs58@5.0.0) @@ -16871,6 +16907,12 @@ snapshots: indent-string: 4.0.0 strip-indent: 3.0.0 + redux-persist@6.0.0(react@19.1.1)(redux@5.0.1): + dependencies: + redux: 5.0.1 + optionalDependencies: + react: 19.1.1 + redux-thunk@3.1.0(redux@5.0.1): dependencies: redux: 5.0.1 diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index b67bd4eab..a2036e274 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -70,10 +70,12 @@ const Layout = ({ children }: { children: React.ReactNode }) => { usePullToRefresh({ shouldPullToRefresh }) useEffect(() => { - if (!isPublicPath && !isFetchingUser && !user) { + // OFFLINE SUPPORT: Only redirect to setup if no JWT token exists + // This allows offline rendering when user data is in Redux (from persistence) + if (!isPublicPath && !isFetchingUser && !user && !hasToken) { router.push('/setup') } - }, [user, isFetchingUser]) + }, [user, isFetchingUser, hasToken, isPublicPath, router]) // For public paths, skip user loading and just show content when ready if (isPublicPath) { @@ -85,14 +87,35 @@ const Layout = ({ children }: { children: React.ReactNode }) => { ) } } else { - // For protected paths, wait for user auth - if (!isReady || isFetchingUser || !hasToken || !user) { + // OFFLINE SUPPORT: Graceful auth fallback for PWA + // Flow: + // 1. If JWT exists but no user yet → allow render (Redux persistence or API in-flight) + // 2. If no JWT and no user → redirect to setup (not logged in) + // 3. Only block render while actively fetching on first load with no JWT + + if (!isReady) { + return ( +
+ +
+ ) + } + + // Block render only if: + // - No JWT token (not logged in) + // - No user data in Redux (no persistence) + // - Still fetching (first load) + if (!hasToken && !user && isFetchingUser) { return (
) } + + // If JWT exists but no user yet, allow render + // Components will handle null user gracefully, and API call will populate it + // This enables offline cold start with persisted data } // After setup flow is completed, show ios pwa install screen if not in pwa diff --git a/src/config/peanut.config.tsx b/src/config/peanut.config.tsx index f663bd95a..fbd414ee9 100644 --- a/src/config/peanut.config.tsx +++ b/src/config/peanut.config.tsx @@ -1,13 +1,15 @@ 'use client' import { ContextProvider } from '@/config' +import PeanutLoading from '@/components/Global/PeanutLoading' import peanut from '@squirrel-labs/peanut-sdk' import { Analytics } from '@vercel/analytics/react' import countries from 'i18n-iso-countries' import enLocale from 'i18n-iso-countries/langs/en.json' import { useEffect } from 'react' import { Provider as ReduxProvider } from 'react-redux' +import { PersistGate } from 'redux-persist/integration/react' -import store from '@/redux/store' +import store, { persistor } from '@/redux/store' import 'react-tooltip/dist/react-tooltip.css' import '../../sentry.client.config' import '../../sentry.edge.config' @@ -26,10 +28,15 @@ export function PeanutProvider({ children }: { children: React.ReactNode }) { return ( - - {children} - - + {/* OFFLINE SUPPORT: PersistGate delays rendering until persisted state is retrieved from localStorage + This ensures Redux has user data before auth guard runs, enabling instant offline loads + Shows loading spinner during rehydration to prevent blank screen or race conditions */} + } persistor={persistor}> + + {children} + + + ) } diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx index 165bcd4d7..d571c96f9 100644 --- a/src/context/authContext.tsx +++ b/src/context/authContext.tsx @@ -3,6 +3,7 @@ import { useToast } from '@/components/0_Bruddle/Toast' import { useUserQuery } from '@/hooks/query/user' import * as interfaces from '@/interfaces' import { useAppDispatch, useUserStore } from '@/redux/hooks' +import { PERSIST_USER_KEY } from '@/redux/store' import { setupActions } from '@/redux/slices/setup-slice' import { fetchWithSentry, @@ -166,6 +167,18 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => { } } + // Clear persisted Redux state to prevent user data leakage + // redux-persist stores user data in localStorage - must clear on logout + // Uses PERSIST_USER_KEY constant for maintainability (DRY principle) + if (typeof window !== 'undefined' && window.localStorage) { + try { + window.localStorage.removeItem(PERSIST_USER_KEY) + console.log('Logout: Cleared persisted Redux user state') + } catch (error) { + console.error('Failed to clear persisted Redux state:', error) + } + } + // clear the iOS PWA prompt session flag if (typeof window !== 'undefined') { sessionStorage.removeItem('hasSeenIOSPWAPromptThisSession') diff --git a/src/hooks/query/user.ts b/src/hooks/query/user.ts index 1b1404800..d83b3afb0 100644 --- a/src/hooks/query/user.ts +++ b/src/hooks/query/user.ts @@ -8,7 +8,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query' import { usePWAStatus } from '../usePWAStatus' import { useDeviceType } from '../useGetDeviceType' -export const useUserQuery = (dependsOn?: boolean) => { +export const useUserQuery = (dependsOn: boolean = true) => { const isPwa = usePWAStatus() const { deviceType } = useDeviceType() const dispatch = useAppDispatch() @@ -45,9 +45,9 @@ export const useUserQuery = (dependsOn?: boolean) => { queryKey: [USER], queryFn: fetchUser, retry: 0, - // only enable the query if: - // 1. dependsOn is true - // 2. no user is currently in the Redux store + // OFFLINE: Only fetch if no user in Redux (from persistence or previous fetch) + // dependsOn defaults to true, allowing manual control when needed + // When Redux has user data (from redux-persist), query is disabled to avoid unnecessary API calls enabled: dependsOn && !authUser?.user.userId, // cache the data for 10 minutes staleTime: 1000 * 60 * 10, diff --git a/src/redux/store.ts b/src/redux/store.ts index a3672945b..8eddd6000 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -1,4 +1,6 @@ import { configureStore } from '@reduxjs/toolkit' +import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist' +import storage from 'redux-persist/lib/storage' // defaults to localStorage for web import paymentReducer from './slices/payment-slice' import sendFlowReducer from './slices/send-flow-slice' import setupReducer from './slices/setup-slice' @@ -7,21 +9,43 @@ import walletReducer from './slices/wallet-slice' import zeroDevReducer from './slices/zerodev-slice' import bankFormReducer from './slices/bank-form-slice' +// OFFLINE SUPPORT: Persist user data to survive page reloads +// for PWA offline functionality - allows app to render without API call + +/** + * localStorage key for persisted Redux user state + * Must be manually cleared on logout to prevent user data leakage + * Format: 'persist:' prefix is added by redux-persist automatically + */ +export const PERSIST_USER_KEY = 'persist:user' + +const userPersistConfig = { + key: 'user', // This becomes 'persist:user' in localStorage + storage, + // Only persist the user profile data, not loading states + whitelist: ['user'], +} + +const persistedUserReducer = persistReducer(userPersistConfig, userReducer) + const store = configureStore({ reducer: { setup: setupReducer, wallet: walletReducer, zeroDev: zeroDevReducer, payment: paymentReducer, - user: userReducer, + user: persistedUserReducer, // Use persisted reducer for user slice sendFlow: sendFlowReducer, bankForm: bankFormReducer, }, - // disable redux serialization checks middleware: (getDefaultMiddleware) => getDefaultMiddleware({ - serializableCheck: false, + serializableCheck: { + // Ignore redux-persist actions + ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], + }, }), }) +export const persistor = persistStore(store) export default store From 3a9855909d427fc13b83ee1936c1f276d1fd65a6 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 13 Nov 2025 18:23:58 -0300 Subject: [PATCH 072/121] update show name toggle --- .../Profile/components/ShowNameToggle.tsx | 51 ++++++++----------- 1 file changed, 21 insertions(+), 30 deletions(-) diff --git a/src/components/Profile/components/ShowNameToggle.tsx b/src/components/Profile/components/ShowNameToggle.tsx index e64bcf4eb..6b47d6ca3 100644 --- a/src/components/Profile/components/ShowNameToggle.tsx +++ b/src/components/Profile/components/ShowNameToggle.tsx @@ -1,51 +1,42 @@ 'use client' import { updateUserById } from '@/app/actions/users' -import Loading from '@/components/Global/Loading' import { useAuth } from '@/context/authContext' import { useState } from 'react' const ShowNameToggle = () => { const { fetchUser, user } = useAuth() - const [isToggleLoading, setIsToggleLoading] = useState(false) const [showFullName, setShowFullName] = useState(user?.user.showFullName ?? false) const handleToggleChange = async () => { - if (isToggleLoading) return + const newValue = !showFullName + setShowFullName(newValue) - setIsToggleLoading(true) - try { - setShowFullName(!showFullName) - await updateUserById({ - userId: user?.user.userId, - showFullName: !showFullName, + // Fire-and-forget: don't await fetchUser() to allow quick navigation + updateUserById({ + userId: user?.user.userId, + showFullName: newValue, + }) + .then(() => { + // Refetch user data in background without blocking + fetchUser() + }) + .catch((error) => { + console.error('Failed to update preferences:', error) + // Revert on error + setShowFullName(!newValue) }) - await fetchUser() - } catch (error) { - console.error('Failed to update preferences:', error) - } finally { - setIsToggleLoading(false) - } } return ( ) } From 26326fc4d12c2e693701f0110c659af0445703f7 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 18:32:22 -0300 Subject: [PATCH 073/121] ok removed redux persist --- package.json | 1 - pnpm-lock.yaml | 18 ------------------ src/app/(mobile-ui)/layout.tsx | 31 ++++--------------------------- src/config/peanut.config.tsx | 17 +++++------------ src/context/authContext.tsx | 13 ------------- src/hooks/query/user.ts | 16 ++++++++-------- src/redux/store.ts | 30 +++--------------------------- 7 files changed, 20 insertions(+), 106 deletions(-) diff --git a/package.json b/package.json index 04e830b71..0b93f9a03 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,6 @@ "react-redux": "^9.2.0", "react-tooltip": "^5.28.0", "redux": "^5.0.1", - "redux-persist": "^6.0.0", "siwe": "^2.3.2", "tailwind-merge": "^1.14.0", "tailwind-scrollbar": "^3.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1dd116ad8..6bc175144 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -194,9 +194,6 @@ importers: redux: specifier: ^5.0.1 version: 5.0.1 - redux-persist: - specifier: ^6.0.0 - version: 6.0.0(react@19.1.1)(redux@5.0.1) siwe: specifier: ^2.3.2 version: 2.3.2(ethers@5.7.2(bufferutil@4.0.9)(utf-8-validate@5.0.10)) @@ -6814,15 +6811,6 @@ packages: resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==} engines: {node: '>=8'} - redux-persist@6.0.0: - resolution: {integrity: sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==} - peerDependencies: - react: '>=16' - redux: '>4.0.0' - peerDependenciesMeta: - react: - optional: true - redux-thunk@3.1.0: resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==} peerDependencies: @@ -16907,12 +16895,6 @@ snapshots: indent-string: 4.0.0 strip-indent: 3.0.0 - redux-persist@6.0.0(react@19.1.1)(redux@5.0.1): - dependencies: - redux: 5.0.1 - optionalDependencies: - react: 19.1.1 - redux-thunk@3.1.0(redux@5.0.1): dependencies: redux: 5.0.1 diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index a2036e274..b67bd4eab 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -70,12 +70,10 @@ const Layout = ({ children }: { children: React.ReactNode }) => { usePullToRefresh({ shouldPullToRefresh }) useEffect(() => { - // OFFLINE SUPPORT: Only redirect to setup if no JWT token exists - // This allows offline rendering when user data is in Redux (from persistence) - if (!isPublicPath && !isFetchingUser && !user && !hasToken) { + if (!isPublicPath && !isFetchingUser && !user) { router.push('/setup') } - }, [user, isFetchingUser, hasToken, isPublicPath, router]) + }, [user, isFetchingUser]) // For public paths, skip user loading and just show content when ready if (isPublicPath) { @@ -87,35 +85,14 @@ const Layout = ({ children }: { children: React.ReactNode }) => { ) } } else { - // OFFLINE SUPPORT: Graceful auth fallback for PWA - // Flow: - // 1. If JWT exists but no user yet → allow render (Redux persistence or API in-flight) - // 2. If no JWT and no user → redirect to setup (not logged in) - // 3. Only block render while actively fetching on first load with no JWT - - if (!isReady) { - return ( -
- -
- ) - } - - // Block render only if: - // - No JWT token (not logged in) - // - No user data in Redux (no persistence) - // - Still fetching (first load) - if (!hasToken && !user && isFetchingUser) { + // For protected paths, wait for user auth + if (!isReady || isFetchingUser || !hasToken || !user) { return (
) } - - // If JWT exists but no user yet, allow render - // Components will handle null user gracefully, and API call will populate it - // This enables offline cold start with persisted data } // After setup flow is completed, show ios pwa install screen if not in pwa diff --git a/src/config/peanut.config.tsx b/src/config/peanut.config.tsx index fbd414ee9..f663bd95a 100644 --- a/src/config/peanut.config.tsx +++ b/src/config/peanut.config.tsx @@ -1,15 +1,13 @@ 'use client' import { ContextProvider } from '@/config' -import PeanutLoading from '@/components/Global/PeanutLoading' import peanut from '@squirrel-labs/peanut-sdk' import { Analytics } from '@vercel/analytics/react' import countries from 'i18n-iso-countries' import enLocale from 'i18n-iso-countries/langs/en.json' import { useEffect } from 'react' import { Provider as ReduxProvider } from 'react-redux' -import { PersistGate } from 'redux-persist/integration/react' -import store, { persistor } from '@/redux/store' +import store from '@/redux/store' import 'react-tooltip/dist/react-tooltip.css' import '../../sentry.client.config' import '../../sentry.edge.config' @@ -28,15 +26,10 @@ export function PeanutProvider({ children }: { children: React.ReactNode }) { return ( - {/* OFFLINE SUPPORT: PersistGate delays rendering until persisted state is retrieved from localStorage - This ensures Redux has user data before auth guard runs, enabling instant offline loads - Shows loading spinner during rehydration to prevent blank screen or race conditions */} - } persistor={persistor}> - - {children} - - - + + {children} + + ) } diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx index d571c96f9..165bcd4d7 100644 --- a/src/context/authContext.tsx +++ b/src/context/authContext.tsx @@ -3,7 +3,6 @@ import { useToast } from '@/components/0_Bruddle/Toast' import { useUserQuery } from '@/hooks/query/user' import * as interfaces from '@/interfaces' import { useAppDispatch, useUserStore } from '@/redux/hooks' -import { PERSIST_USER_KEY } from '@/redux/store' import { setupActions } from '@/redux/slices/setup-slice' import { fetchWithSentry, @@ -167,18 +166,6 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => { } } - // Clear persisted Redux state to prevent user data leakage - // redux-persist stores user data in localStorage - must clear on logout - // Uses PERSIST_USER_KEY constant for maintainability (DRY principle) - if (typeof window !== 'undefined' && window.localStorage) { - try { - window.localStorage.removeItem(PERSIST_USER_KEY) - console.log('Logout: Cleared persisted Redux user state') - } catch (error) { - console.error('Failed to clear persisted Redux state:', error) - } - } - // clear the iOS PWA prompt session flag if (typeof window !== 'undefined') { sessionStorage.removeItem('hasSeenIOSPWAPromptThisSession') diff --git a/src/hooks/query/user.ts b/src/hooks/query/user.ts index d83b3afb0..3b80720e1 100644 --- a/src/hooks/query/user.ts +++ b/src/hooks/query/user.ts @@ -8,7 +8,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query' import { usePWAStatus } from '../usePWAStatus' import { useDeviceType } from '../useGetDeviceType' -export const useUserQuery = (dependsOn: boolean = true) => { +export const useUserQuery = (dependsOn?: boolean) => { const isPwa = usePWAStatus() const { deviceType } = useDeviceType() const dispatch = useAppDispatch() @@ -45,16 +45,16 @@ export const useUserQuery = (dependsOn: boolean = true) => { queryKey: [USER], queryFn: fetchUser, retry: 0, - // OFFLINE: Only fetch if no user in Redux (from persistence or previous fetch) - // dependsOn defaults to true, allowing manual control when needed - // When Redux has user data (from redux-persist), query is disabled to avoid unnecessary API calls + // OFFLINE: Service Worker will cache the API response for instant loads + // staleTime: 0 ensures we always check SW cache first (10-50ms response) + // SW uses StaleWhileRevalidate: instant cache response + background update enabled: dependsOn && !authUser?.user.userId, - // cache the data for 10 minutes - staleTime: 1000 * 60 * 10, + // Always check SW cache on mount for offline support + staleTime: 0, // refetch only when window is focused if data is stale refetchOnWindowFocus: true, - // prevent unnecessary refetches - refetchOnMount: false, + // Always refetch on mount to trigger SW cache check + refetchOnMount: true, // add initial data from Redux if available initialData: authUser || undefined, // keep previous data diff --git a/src/redux/store.ts b/src/redux/store.ts index 8eddd6000..a3672945b 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -1,6 +1,4 @@ import { configureStore } from '@reduxjs/toolkit' -import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist' -import storage from 'redux-persist/lib/storage' // defaults to localStorage for web import paymentReducer from './slices/payment-slice' import sendFlowReducer from './slices/send-flow-slice' import setupReducer from './slices/setup-slice' @@ -9,43 +7,21 @@ import walletReducer from './slices/wallet-slice' import zeroDevReducer from './slices/zerodev-slice' import bankFormReducer from './slices/bank-form-slice' -// OFFLINE SUPPORT: Persist user data to survive page reloads -// for PWA offline functionality - allows app to render without API call - -/** - * localStorage key for persisted Redux user state - * Must be manually cleared on logout to prevent user data leakage - * Format: 'persist:' prefix is added by redux-persist automatically - */ -export const PERSIST_USER_KEY = 'persist:user' - -const userPersistConfig = { - key: 'user', // This becomes 'persist:user' in localStorage - storage, - // Only persist the user profile data, not loading states - whitelist: ['user'], -} - -const persistedUserReducer = persistReducer(userPersistConfig, userReducer) - const store = configureStore({ reducer: { setup: setupReducer, wallet: walletReducer, zeroDev: zeroDevReducer, payment: paymentReducer, - user: persistedUserReducer, // Use persisted reducer for user slice + user: userReducer, sendFlow: sendFlowReducer, bankForm: bankFormReducer, }, + // disable redux serialization checks middleware: (getDefaultMiddleware) => getDefaultMiddleware({ - serializableCheck: { - // Ignore redux-persist actions - ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], - }, + serializableCheck: false, }), }) -export const persistor = persistStore(store) export default store From 34218c9c0b6d1c08c0bf66a8d69a715aab05c26b Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 18:51:32 -0300 Subject: [PATCH 074/121] fix --- next.config.js | 24 +++++++++++++----------- src/app/layout.tsx | 31 ++++++++++++++++++++++--------- src/app/sw.ts | 3 ++- 3 files changed, 37 insertions(+), 21 deletions(-) diff --git a/next.config.js b/next.config.js index e83348b28..e09de79a9 100644 --- a/next.config.js +++ b/next.config.js @@ -161,6 +161,7 @@ let nextConfig = { }, } +// Apply Sentry wrapper in production if (process.env.NODE_ENV !== 'development' && !Boolean(process.env.LOCAL_BUILD)) { const { withSentryConfig } = require('@sentry/nextjs') @@ -208,20 +209,21 @@ if (process.env.NODE_ENV !== 'development' && !Boolean(process.env.LOCAL_BUILD)) deleteSourcemapsAfterUpload: true, }, }) -} else { - module.exports = nextConfig } -// Apply bundle analyzer and Serwist (production only) +// CRITICAL FIX: Apply wrappers in correct order +// Development: Only bundle analyzer (no Serwist or Sentry) +// Production: Sentry → Serwist → Bundle Analyzer if (process.env.NODE_ENV !== 'development') { - module.exports = async () => { - const withSerwist = (await import('@serwist/next')).default({ - swSrc: './src/app/sw.ts', - swDest: 'public/sw.js', - }) - // Wrap both Serwist AND bundle analyzer - return withSerwist(withBundleAnalyzer(nextConfig)) - } + // Production: Wrap with Serwist and bundle analyzer + // NOTE: Serwist must be imported dynamically and configured synchronously + const withSerwist = require('@serwist/next').default({ + swSrc: './src/app/sw.ts', + swDest: 'public/sw.js', + }) + + // Apply in order: Sentry (already applied to nextConfig) → Serwist → Bundle Analyzer + module.exports = withBundleAnalyzer(withSerwist(nextConfig)) } else { // Development: only bundle analyzer (no Serwist) module.exports = withBundleAnalyzer(nextConfig) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8995ebb4d..dc25676a9 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -86,15 +86,28 @@ export default function RootLayout({ children }: { children: React.ReactNode }) + + + From 1d1a3c48c93162ebecbaea13db6faeb3b0b1dc7e Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 21:46:02 -0300 Subject: [PATCH 084/121] sw update --- src/app/sw.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/app/sw.ts b/src/app/sw.ts index cb7160d1e..db01e46a5 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -136,17 +136,24 @@ console.log('[SW] ⚙️ Final configuration:', { API_URL, API_HOSTNAME, CACHE_VERSION, - manifestType: typeof self.__SW_MANIFEST, - manifestIsArray: Array.isArray(self.__SW_MANIFEST), + manifestEntries: precacheManifest.length, + hasPrecache: precacheManifest.length > 0, }) console.log('============================================') /** - * Matches API requests to the configured API hostname + * Matches API requests to the configured API hostname OR Next.js API routes * Ensures caching works consistently across dev, staging, and production */ const isApiRequest = (url: URL): boolean => { - return url.hostname === API_HOSTNAME + // Match direct API calls (production/staging) + if (url.hostname === API_HOSTNAME) return true + + // Match Next.js API routes (development: localhost:3000/api/...) + // These proxy to the real API, so they should be cached the same way + if (url.pathname.startsWith('/api/')) return true + + return false } // NATIVE PWA: Custom caching strategies for API endpoints From a349965c73f88e351ef243dd7385a7b0f36f90ac Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Thu, 13 Nov 2025 21:56:01 -0300 Subject: [PATCH 085/121] hotfixes for sentry crashes --- src/app/(mobile-ui)/add-money/crypto/direct/page.tsx | 2 +- src/components/Global/TokenAmountInput/index.tsx | 4 +++- src/components/Setup/Views/InstallPWA.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/(mobile-ui)/add-money/crypto/direct/page.tsx b/src/app/(mobile-ui)/add-money/crypto/direct/page.tsx index ec7b193ed..34863d391 100644 --- a/src/app/(mobile-ui)/add-money/crypto/direct/page.tsx +++ b/src/app/(mobile-ui)/add-money/crypto/direct/page.tsx @@ -119,7 +119,7 @@ export default function AddMoneyCryptoDirectPage() { minAmount={0.1} maxAmount={30_000} onValidationError={setError} - disabled={inputTokenAmount === '0.00'} + disabled={inputTokenAmount === '0.00' || inputTokenAmount === ''} > Add Money diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx index a8cc473b1..34067b350 100644 --- a/src/components/Global/TokenAmountInput/index.tsx +++ b/src/components/Global/TokenAmountInput/index.tsx @@ -355,7 +355,9 @@ const TokenAmountInput = ({ ≈{' '} {displayMode === 'TOKEN' ? alternativeDisplayValue - : formatCurrency(alternativeDisplayValue.replace(',', ''))}{' '} + : alternativeDisplayValue + ? formatCurrency(alternativeDisplayValue.replace(',', '')) + : '0.00'}{' '} {alternativeDisplaySymbol} )} diff --git a/src/components/Setup/Views/InstallPWA.tsx b/src/components/Setup/Views/InstallPWA.tsx index f6d39f9b1..169326064 100644 --- a/src/components/Setup/Views/InstallPWA.tsx +++ b/src/components/Setup/Views/InstallPWA.tsx @@ -53,7 +53,7 @@ const InstallPWA = ({ { platform: string; url?: string; id?: string; version?: string }[] > } - const installedApps = (await _navigator.getInstalledRelatedApps()) ?? [] + const installedApps = _navigator.getInstalledRelatedApps ? await _navigator.getInstalledRelatedApps() : [] if (installedApps.length > 0) { setIsPWAInstalled(true) } else { From 193cc7077a25017d4bf5d67784776c4ab9434744 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Fri, 14 Nov 2025 00:06:59 -0300 Subject: [PATCH 086/121] fix --- src/components/Global/TokenAmountInput/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx index 34067b350..b4f7b12aa 100644 --- a/src/components/Global/TokenAmountInput/index.tsx +++ b/src/components/Global/TokenAmountInput/index.tsx @@ -65,6 +65,7 @@ const TokenAmountInput = ({ const searchParams = useSearchParams() const inputRef = useRef(null) const inputType = useMemo(() => (window.innerWidth < 640 ? 'text' : 'number'), []) + const isInternalUpdateRef = useRef(false) const [isFocused, setIsFocused] = useState(false) const { deviceType } = useDeviceType() // Only autofocus on desktop (WEB), not on mobile devices (IOS/ANDROID) @@ -200,16 +201,22 @@ const TokenAmountInput = ({ useEffect(() => { // early return if tokenValue is empty. if (!tokenValue) return + // Prevent loop: skip if this update was triggered by this useEffect + if (isInternalUpdateRef.current) { + isInternalUpdateRef.current = false + return + } if (!isInitialInputUsd) { const value = tokenValue ? Number(tokenValue) : 0 const calculatedValue = value * (currency?.price ?? 1) const formattedValue = formatTokenAmount(calculatedValue, PEANUT_WALLET_TOKEN_DECIMALS) ?? '0' + isInternalUpdateRef.current = true onChange(formattedValue, isInputUsd) } else { onChange(displayValue, isInputUsd) } - }, [selectedTokenData?.price]) // Seriously, this is ok + }, [selectedTokenData?.price, currency?.price, isInitialInputUsd, tokenValue]) useEffect(() => { switch (displayMode) { From bf89912b827a8fe33ebb003d355869d8db88794f Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Fri, 14 Nov 2025 00:18:40 -0300 Subject: [PATCH 087/121] fix for manual input and autoupdate --- src/components/Global/TokenAmountInput/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx index b4f7b12aa..a05a7cc6a 100644 --- a/src/components/Global/TokenAmountInput/index.tsx +++ b/src/components/Global/TokenAmountInput/index.tsx @@ -66,6 +66,7 @@ const TokenAmountInput = ({ const inputRef = useRef(null) const inputType = useMemo(() => (window.innerWidth < 640 ? 'text' : 'number'), []) const isInternalUpdateRef = useRef(false) + const prevTokenValueRef = useRef(tokenValue) const [isFocused, setIsFocused] = useState(false) const { deviceType } = useDeviceType() // Only autofocus on desktop (WEB), not on mobile devices (IOS/ANDROID) @@ -150,6 +151,7 @@ const TokenAmountInput = ({ throw new Error('Invalid display mode') } } + prevTokenValueRef.current = tokenValue // Track that we're updating it setTokenValue(tokenValue) }, [displayMode, currency?.price, selectedTokenData?.price, calculateAlternativeValue] @@ -207,13 +209,17 @@ const TokenAmountInput = ({ return } - if (!isInitialInputUsd) { + // Only run if tokenValue changed externally (from parent prop, not from our onChange) + const isExternalChange = prevTokenValueRef.current !== tokenValue + prevTokenValueRef.current = tokenValue + + if (!isInitialInputUsd && (isExternalChange || !displayValue)) { const value = tokenValue ? Number(tokenValue) : 0 const calculatedValue = value * (currency?.price ?? 1) const formattedValue = formatTokenAmount(calculatedValue, PEANUT_WALLET_TOKEN_DECIMALS) ?? '0' isInternalUpdateRef.current = true onChange(formattedValue, isInputUsd) - } else { + } else if (isInitialInputUsd) { onChange(displayValue, isInputUsd) } }, [selectedTokenData?.price, currency?.price, isInitialInputUsd, tokenValue]) From 0762b5e0d8653a76e145c3999e17d3421e44b887 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Fri, 14 Nov 2025 00:29:57 -0300 Subject: [PATCH 088/121] prevent re-render on user input --- src/components/Global/TokenAmountInput/index.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx index a05a7cc6a..11b4ebcdc 100644 --- a/src/components/Global/TokenAmountInput/index.tsx +++ b/src/components/Global/TokenAmountInput/index.tsx @@ -67,6 +67,7 @@ const TokenAmountInput = ({ const inputType = useMemo(() => (window.innerWidth < 640 ? 'text' : 'number'), []) const isInternalUpdateRef = useRef(false) const prevTokenValueRef = useRef(tokenValue) + const hasUserInputRef = useRef(false) const [isFocused, setIsFocused] = useState(false) const { deviceType } = useDeviceType() // Only autofocus on desktop (WEB), not on mobile devices (IOS/ANDROID) @@ -125,9 +126,12 @@ const TokenAmountInput = ({ ) const onChange = useCallback( - (value: string, _isInputUsd: boolean) => { + (value: string, _isInputUsd: boolean, isUserInput: boolean = false) => { setDisplayValue(value) setAlternativeDisplayValue(calculateAlternativeValue(value)) + if (isUserInput) { + hasUserInputRef.current = true + } let tokenValue: string switch (displayMode) { case 'STABLE': { @@ -213,11 +217,19 @@ const TokenAmountInput = ({ const isExternalChange = prevTokenValueRef.current !== tokenValue prevTokenValueRef.current = tokenValue + // Don't reconvert if user has manually entered a value (prevents precision errors on round-trip) + if (hasUserInputRef.current && displayValue && isExternalChange) { + // User typed a value, backend confirmed with slight precision difference + // Keep user's display value, don't reconvert + return + } + if (!isInitialInputUsd && (isExternalChange || !displayValue)) { const value = tokenValue ? Number(tokenValue) : 0 const calculatedValue = value * (currency?.price ?? 1) const formattedValue = formatTokenAmount(calculatedValue, PEANUT_WALLET_TOKEN_DECIMALS) ?? '0' isInternalUpdateRef.current = true + hasUserInputRef.current = false // Reset after external update onChange(formattedValue, isInputUsd) } else if (isInitialInputUsd) { onChange(displayValue, isInputUsd) @@ -333,7 +345,7 @@ const TokenAmountInput = ({ if (formattedAmount !== undefined) { value = formattedAmount } - onChange(value, isInputUsd) + onChange(value, isInputUsd, true) // Mark as user input }} ref={inputRef} inputMode="decimal" From 5b47bc3e901a7a55ef944a4f2c3b190da0bf3fab Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Fri, 14 Nov 2025 00:31:40 -0300 Subject: [PATCH 089/121] some defensive changes. i dont like this component --- .../Global/TokenAmountInput/index.tsx | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx index 11b4ebcdc..08f6d4ec0 100644 --- a/src/components/Global/TokenAmountInput/index.tsx +++ b/src/components/Global/TokenAmountInput/index.tsx @@ -80,6 +80,14 @@ const TokenAmountInput = ({ const [alternativeDisplayValue, setAlternativeDisplayValue] = useState('0.00') const [alternativeDisplaySymbol, setAlternativeDisplaySymbol] = useState('') + // Reset hasUserInputRef when tokenValue changes from undefined to defined (new QR/flow) + useEffect(() => { + if (tokenValue && !prevTokenValueRef.current) { + // New value loaded (e.g., QR scan), reset user input flag + hasUserInputRef.current = false + } + }, [tokenValue]) + const displayMode = useMemo<'TOKEN' | 'STABLE' | 'FIAT'>(() => { if (currency) return 'FIAT' if (selectedTokenData?.symbol && STABLE_COINS.includes(selectedTokenData?.symbol)) { @@ -189,7 +197,7 @@ const TokenAmountInput = ({ : decimals const formattedAmount = formatTokenAmount(selectedAmountStr, maxDecimals, true) if (formattedAmount) { - onChange(formattedAmount, isInputUsd) + onChange(formattedAmount, isInputUsd, true) // Mark slider as user input } } }, @@ -215,15 +223,27 @@ const TokenAmountInput = ({ // Only run if tokenValue changed externally (from parent prop, not from our onChange) const isExternalChange = prevTokenValueRef.current !== tokenValue - prevTokenValueRef.current = tokenValue // Don't reconvert if user has manually entered a value (prevents precision errors on round-trip) + // But DO reconvert if the price changed significantly (token/currency selector change) if (hasUserInputRef.current && displayValue && isExternalChange) { - // User typed a value, backend confirmed with slight precision difference - // Keep user's display value, don't reconvert - return + // Check if this is a small precision change vs a major price change + const oldUsdValue = prevTokenValueRef.current ? Number(prevTokenValueRef.current) : 0 + const newUsdValue = tokenValue ? Number(tokenValue) : 0 + const percentChange = oldUsdValue ? Math.abs((newUsdValue - oldUsdValue) / oldUsdValue) : 1 + + // If change is < 1%, it's likely a precision round-trip, keep user's display + // If change is >= 1%, it's a real change (price update, new QR), reconvert + if (percentChange < 0.01) { + prevTokenValueRef.current = tokenValue + return // Skip reconversion for small precision differences + } + // Large change detected, reset flag and proceed with conversion + hasUserInputRef.current = false } + prevTokenValueRef.current = tokenValue + if (!isInitialInputUsd && (isExternalChange || !displayValue)) { const value = tokenValue ? Number(tokenValue) : 0 const calculatedValue = value * (currency?.price ?? 1) From be060f4af2d3cf41e886ccf6a5fc38e87b6a0185 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Fri, 14 Nov 2025 10:42:24 -0300 Subject: [PATCH 090/121] final prod ready release of SW implementation. --- .cursorrules | 1 + public/test-sw.html | 239 -------------------------------------------- src/app/sw.ts | 152 +++++++++------------------- 3 files changed, 47 insertions(+), 345 deletions(-) delete mode 100644 public/test-sw.html diff --git a/.cursorrules b/.cursorrules index 59bcc3cf4..6ecc152d0 100644 --- a/.cursorrules +++ b/.cursorrules @@ -42,6 +42,7 @@ - **Cache where possible** - avoid unnecessary re-renders and data fetching - **Fire simultaneous requests** - if you're doing multiple sequential awaits and they're not interdependent, fire them simultaneously +- **Service Worker cache version** - only bump `NEXT_PUBLIC_API_VERSION` for breaking API changes (see JSDoc in `src/app/sw.ts`). Users auto-migrate. ## 📝 Commits diff --git a/public/test-sw.html b/public/test-sw.html deleted file mode 100644 index ac089cd74..000000000 --- a/public/test-sw.html +++ /dev/null @@ -1,239 +0,0 @@ - - - - - - SW Debug Panel - - - -

🔍 Service Worker Debug Panel

- -
-

1. SW Registration Status

-
Checking...
- - - -
- -
-

2. Cache Contents

-
Loading...
- - -
- -
-

3. Test API Fetch (via SW)

-
Not tested yet
- - -
- -
-

4. Console Logs (Open DevTools Console for full logs)

-
- ⚠️ Open Chrome DevTools → Application → Service Workers
- ⚠️ Open Chrome DevTools → Console → Filter by "[SW]" -
-
- - - - - diff --git a/src/app/sw.ts b/src/app/sw.ts index db01e46a5..fba35666c 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -84,13 +84,6 @@ declare global { declare const self: ServiceWorkerGlobalScope -// 🚨 DEBUG: Log immediately at top of file to verify SW is loading -console.log('============================================') -console.log('[SW] 🚀 Service Worker file is loading...') -console.log('[SW] 📅 Timestamp:', new Date().toISOString()) -console.log('[SW] 🌐 Location:', self.location.href) -console.log('============================================') - // Helper to access Next.js build-time injected env vars with type safety // Uses double assertion to avoid 'as any' while maintaining type safety const getEnv = (): NextPublicEnv => { @@ -102,27 +95,46 @@ const getEnv = (): NextPublicEnv => { } } -// 🚨 DEBUG: Log environment variable access -console.log('[SW] 🔍 Reading environment variables...') const envVars = getEnv() -console.log('[SW] 📋 Environment check:', { - hasApiUrl: !!envVars.NEXT_PUBLIC_PEANUT_API_URL, - hasApiVersion: !!envVars.NEXT_PUBLIC_API_VERSION, - apiUrl: envVars.NEXT_PUBLIC_PEANUT_API_URL || '❌ NOT_SET', - apiVersion: envVars.NEXT_PUBLIC_API_VERSION || '❌ NOT_SET', -}) // CRITICAL: Capture SW manifest immediately - Serwist replaces self.__SW_MANIFEST at build time // and expects to see it ONLY ONCE in the entire file. Store it in a variable for reuse. const precacheManifest = self.__SW_MANIFEST || [] -// Cache version tied to API version - automatic invalidation on breaking changes -// Uses NEXT_PUBLIC_API_VERSION (set in Vercel env vars or .env) -// Increment NEXT_PUBLIC_API_VERSION only when: -// - API response structure changes (breaking changes) -// - Cache strategy changes (e.g., switching from NetworkFirst to CacheFirst) -// Most deploys: API_VERSION stays the same → cache preserved (fast repeat visits) -// Breaking changes: Bump API_VERSION (v1→v2) → cache auto-invalidates across all users +/** + * Cache version tied to API version for automatic cache invalidation. + * + * @dev WHEN TO BUMP CACHE VERSION (NEXT_PUBLIC_API_VERSION): + * + * ✅ **DO BUMP** when: + * - API response structure changes (breaking changes) + * Example: User object adds/removes/renames fields + * - Cache strategy changes (NetworkFirst → CacheFirst, TTL changes, etc.) + * - Critical bug in cached data requires force refresh for all users + * - Database schema changes that affect API responses + * + * ❌ **DON'T BUMP** when: + * - Adding new endpoints (old caches unaffected) + * - Bug fixes that don't affect cached data structure + * - UI changes (CSS, components, etc.) + * - Most regular deployments + * + * 📦 **AUTOMATIC MIGRATION** (no manual intervention needed): + * 1. Deploy with new NEXT_PUBLIC_API_VERSION (v1 → v2) + * 2. Browser detects SW update, installs new version + * 3. On next page load, activate event fires + * 4. Old caches (user-api-v1) auto-deleted by cleanup code + * 5. New caches (user-api-v2) created on first request + * → Users seamlessly migrate to new cache version + * + * 💡 **EXAMPLE SCENARIOS**: + * - "Added new /api/notifications endpoint" → DON'T BUMP (new cache, no conflict) + * - "User.balance is now User.balances[]" → BUMP (breaking change) + * - "Changed user cache from 1 week to 1 day" → BUMP (strategy change) + * - "Fixed typo in component" → DON'T BUMP (UI only) + * + * Current version: Uses NEXT_PUBLIC_API_VERSION env var (set in Vercel/Railway or .env) + */ const CACHE_VERSION = envVars.NEXT_PUBLIC_API_VERSION || 'v1' // Extract API hostname from build-time environment variable @@ -131,15 +143,8 @@ const CACHE_VERSION = envVars.NEXT_PUBLIC_API_VERSION || 'v1' const API_URL = envVars.NEXT_PUBLIC_PEANUT_API_URL || 'https://api.peanut.me' const API_HOSTNAME = new URL(API_URL).hostname -// 🚨 DEBUG: Log final configuration -console.log('[SW] ⚙️ Final configuration:', { - API_URL, - API_HOSTNAME, - CACHE_VERSION, - manifestEntries: precacheManifest.length, - hasPrecache: precacheManifest.length > 0, -}) -console.log('============================================') +// Log configuration on initialization for debugging +console.log('[SW] ⚙️ Initialized with:', { API_HOSTNAME, CACHE_VERSION, entries: precacheManifest.length }) /** * Matches API requests to the configured API hostname OR Next.js API routes @@ -158,7 +163,6 @@ const isApiRequest = (url: URL): boolean => { // NATIVE PWA: Custom caching strategies for API endpoints // JWT token is in httpOnly cookies, so it's automatically sent with fetch requests -console.log('[SW] 🔧 Initializing Serwist...') const serwist = new Serwist({ precacheEntries: precacheManifest, skipWaiting: true, @@ -425,30 +429,15 @@ self.addEventListener('notificationclick', (event) => { ) }) -// Add explicit install event listener for debugging -self.addEventListener('install', (event) => { - console.log('[SW] 📦 Installing...') - // skipWaiting() is already handled by Serwist config, but log it - self.skipWaiting() -}) - -// Add explicit fetch event listener for debugging -self.addEventListener('fetch', (event) => { - if (event.request.mode === 'navigate') { - console.log('[SW] 🔍 Navigation fetch:', event.request.url) - } -}) - // Cache cleanup on service worker activation // Removes old cache versions when SW updates to prevent storage bloat self.addEventListener('activate', (event) => { - console.log('[SW] ⚡ Activating...') + console.log('[SW] ⚡ Activating (version:', CACHE_VERSION + ')') event.waitUntil( (async () => { try { // CRITICAL: Claim all clients immediately so SW controls all open pages await self.clients.claim() - console.log('[SW] ✅ Claimed all clients') const cacheNames = await caches.keys() const currentCaches = [ @@ -463,16 +452,16 @@ self.addEventListener('activate', (event) => { ] // Delete old cache versions (not current caches, not precache) - await Promise.all( - cacheNames - .filter((name) => !currentCaches.includes(name) && !name.startsWith('serwist-precache')) - .map((name) => { - console.log('Deleting old cache:', name) - return caches.delete(name) - }) + const oldCaches = cacheNames.filter( + (name) => !currentCaches.includes(name) && !name.startsWith('serwist-precache') ) - console.log('Service Worker activated with cache version:', CACHE_VERSION) + if (oldCaches.length > 0) { + console.log('[SW] 🗑️ Cleaning up', oldCaches.length, 'old cache(s)') + await Promise.all(oldCaches.map((name) => caches.delete(name))) + } + + console.log('[SW] ✅ Activated') } catch (error) { console.error('Cache cleanup failed:', error) @@ -623,53 +612,4 @@ self.addEventListener('message', (event) => { }) serwist.addEventListeners() -console.log('[SW] ✅ Serwist event listeners added') -console.log('[SW] ✅ Service Worker initialization complete!') -console.log('============================================') - -// DEBUG: Log SW lifecycle events -self.addEventListener('install', (event) => { - console.log('[SW] 📦 INSTALL event fired') - console.log('[SW] 📦 SW version:', CACHE_VERSION) -}) - -self.addEventListener('activate', (event) => { - console.log('[SW] ⚡ ACTIVATE event fired') - console.log('[SW] ⚡ Taking control of all clients...') -}) - -// Debug logging for navigation requests (non-interfering) -self.addEventListener('fetch', (event) => { - if (event.request.mode === 'navigate') { - const url = new URL(event.request.url) - console.log('[SW] 🔍 Navigation request:', url.pathname) - } - - // Debug all fetch requests to see what's being intercepted - const url = new URL(event.request.url) - if (isApiRequest(url)) { - console.log('[SW] 📡 API request:', event.request.method, url.pathname) - } -}) - -// Monitor cache writes -self.addEventListener('message', (event) => { - if (event.data?.type === 'CHECK_CACHES') { - ;(async () => { - const cacheNames = await caches.keys() - const cacheContents = {} - - for (const name of cacheNames) { - const cache = await caches.open(name) - const keys = await cache.keys() - cacheContents[name] = keys.map((req) => req.url) - } - - console.log('[SW] 📦 Cache contents:', cacheContents) - - if (event.ports[0]) { - event.ports[0].postMessage({ caches: cacheContents }) - } - })() - } -}) +console.log('[SW] ✅ Service Worker initialized') From f600713491db7a376302bbb728dd0150faba99f2 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Fri, 14 Nov 2025 10:50:49 -0300 Subject: [PATCH 091/121] formatting --- src/app/(mobile-ui)/home/page.tsx | 52 +++++++++---------- .../TransactionDetails/TransactionCard.tsx | 14 ++--- src/context/kernelClient.context.tsx | 34 ++++++------ src/hooks/query/user.ts | 4 +- 4 files changed, 52 insertions(+), 52 deletions(-) diff --git a/src/app/(mobile-ui)/home/page.tsx b/src/app/(mobile-ui)/home/page.tsx index 0e638b250..8f17b565c 100644 --- a/src/app/(mobile-ui)/home/page.tsx +++ b/src/app/(mobile-ui)/home/page.tsx @@ -253,52 +253,52 @@ export default function Home() { - + - + - { - // close the modal immediately for better ux - setShowKycModal(false) - // update the database and refetch user to ensure sync - if (user?.user.userId) { - await updateUserById({ - userId: user.user.userId, - showKycCompletedModal: false, - }) - // refetch user to ensure the modal doesn't reappear - await fetchUser() - } - }} - /> + { + // close the modal immediately for better ux + setShowKycModal(false) + // update the database and refetch user to ensure sync + if (user?.user.userId) { + await updateUserById({ + userId: user.user.userId, + showKycCompletedModal: false, + }) + // refetch user to ensure the modal doesn't reappear + await fetchUser() + } + }} + /> {/* Balance Warning Modal */} - { - setShowBalanceWarningModal(false) - updateUserPreferences(user!.user.userId, { + { + setShowBalanceWarningModal(false) + updateUserPreferences(user!.user.userId, { hasSeenBalanceWarning: { value: true, expiry: Date.now() + BALANCE_WARNING_EXPIRY * 1000, }, - }) - }} - /> + }) + }} + /> diff --git a/src/components/TransactionDetails/TransactionCard.tsx b/src/components/TransactionDetails/TransactionCard.tsx index 53b48b5d3..8815c24ea 100644 --- a/src/components/TransactionDetails/TransactionCard.tsx +++ b/src/components/TransactionDetails/TransactionCard.tsx @@ -186,13 +186,13 @@ const TransactionCard: React.FC = ({ {/* Transaction Details Drawer */} - + diff --git a/src/context/kernelClient.context.tsx b/src/context/kernelClient.context.tsx index 6a15e00a1..e6d75d4a6 100644 --- a/src/context/kernelClient.context.tsx +++ b/src/context/kernelClient.context.tsx @@ -194,24 +194,24 @@ export const KernelClientProvider = ({ children }: { children: ReactNode }) => { // Currently only 1 chain configured (Arbitrum), but this enables future multi-chain support const clientPromises = Object.entries(PUBLIC_CLIENTS_BY_CHAIN).map( async ([chainId, { client, chain, bundlerUrl, paymasterUrl }]) => { - try { - const kernelClient = await createKernelClientForChain( - client, - chain, - isAfterZeroDevMigration, - webAuthnKey, - isAfterZeroDevMigration - ? undefined - : (user?.accounts.find((a) => a.type === 'peanut-wallet')!.identifier as Address), - { - bundlerUrl, - paymasterUrl, - } - ) + try { + const kernelClient = await createKernelClientForChain( + client, + chain, + isAfterZeroDevMigration, + webAuthnKey, + isAfterZeroDevMigration + ? undefined + : (user?.accounts.find((a) => a.type === 'peanut-wallet')!.identifier as Address), + { + bundlerUrl, + paymasterUrl, + } + ) return { chainId, kernelClient, success: true } as const - } catch (error) { - console.error(`Error creating kernel client for chain ${chainId}:`, error) - captureException(error) + } catch (error) { + console.error(`Error creating kernel client for chain ${chainId}:`, error) + captureException(error) return { chainId, error, success: false } as const } } diff --git a/src/hooks/query/user.ts b/src/hooks/query/user.ts index 37a219583..9f08f765c 100644 --- a/src/hooks/query/user.ts +++ b/src/hooks/query/user.ts @@ -8,7 +8,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query' import { usePWAStatus } from '../usePWAStatus' import { useDeviceType } from '../useGetDeviceType' -export const useUserQuery = (dependsOn?: boolean) => { +export const useUserQuery = (dependsOn: boolean = true) => { const isPwa = usePWAStatus() const { deviceType } = useDeviceType() const dispatch = useAppDispatch() @@ -45,7 +45,7 @@ export const useUserQuery = (dependsOn?: boolean) => { queryKey: [USER], queryFn: fetchUser, retry: 0, - // Enable if dependsOn is true (default: true) and no Redux user + // Enable if dependsOn is true (defaults to true) and no Redux user exists yet enabled: dependsOn && !authUser?.user.userId, // Two-tier caching strategy for optimal performance: // TIER 1: TanStack Query in-memory cache (5 min) From fceb03223ad796864bd608b14d842c2d9c05690a Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 14 Nov 2025 12:25:04 -0300 Subject: [PATCH 092/121] feat: cherry pick arbiverse badge commit --- public/badges/arbiverse_devconnect.svg | 41 ++++++++++++ src/components/Badges/badge.utils.ts | 4 +- src/components/Invites/InvitesPage.tsx | 86 +++++++++++++++++++++----- 3 files changed, 116 insertions(+), 15 deletions(-) create mode 100644 public/badges/arbiverse_devconnect.svg diff --git a/public/badges/arbiverse_devconnect.svg b/public/badges/arbiverse_devconnect.svg new file mode 100644 index 000000000..94bdc8b18 --- /dev/null +++ b/public/badges/arbiverse_devconnect.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Badges/badge.utils.ts b/src/components/Badges/badge.utils.ts index 706a76ca5..65c82761f 100644 --- a/src/components/Badges/badge.utils.ts +++ b/src/components/Badges/badge.utils.ts @@ -12,6 +12,7 @@ const CODE_TO_PATH: Record = { MOST_INVITES: '/badges/most_invites.svg', BIGGEST_REQUEST_POT: '/badges/biggest_request_pot.svg', SEEDLING_DEVCONNECT_BA_2025: '/badges/seedlings_devconnect.svg', + ARBIVERSE_DEVCONNECT_BA_2025: '/badges/arbiverse_devconnect.svg', } // public-facing descriptions for badges (third-person perspective) @@ -25,7 +26,8 @@ const PUBLIC_DESCRIPTIONS: Record = { MOST_PAYMENTS_DEVCON: `Money Machine - They move money like it's light work. Most payments made!`, MOST_INVITES: 'Onboarded more users than Coinbase ads!', BIGGEST_REQUEST_POT: 'High Roller or Master Beggar? They created the pot with the highest number of contributors.', - SEEDLING_DEVCONNECT_BA_2025: 'Peanut Ambassador. You spread the word and brought others into the ecosystem.', + SEEDLING_DEVCONNECT_BA_2025: 'Peanut Ambassador. They spread the word and brought others into the ecosystem.', + ARBIVERSE_DEVCONNECT_BA_2025: 'Peanut 🤝 Arbiverse. They joined us at the amazing Arbiverse booth.', } export function getBadgeIcon(code?: string) { diff --git a/src/components/Invites/InvitesPage.tsx b/src/components/Invites/InvitesPage.tsx index f58454251..61a35a25e 100644 --- a/src/components/Invites/InvitesPage.tsx +++ b/src/components/Invites/InvitesPage.tsx @@ -1,5 +1,5 @@ 'use client' -import React, { Suspense, useEffect } from 'react' +import { Suspense, useEffect, useRef, useState } from 'react' import PeanutLoading from '../Global/PeanutLoading' import ValidationErrorView from '../Payment/Views/Error.validation.view' import InvitesPageLayout from './InvitesPageLayout' @@ -17,16 +17,30 @@ import { saveToCookie } from '@/utils' import { useLogin } from '@/hooks/useLogin' import UnsupportedBrowserModal from '../Global/UnsupportedBrowserModal' +// mapping of special invite codes to their campaign tags +// when these invite codes are used, the corresponding campaign tag is automatically applied +const INVITE_CODE_TO_CAMPAIGN_MAP: Record = { + arbiverseinvitesyou: 'ARBIVERSE_DEVCONNECT_BA_2025', +} + function InvitePageContent() { const searchParams = useSearchParams() - const inviteCode = searchParams.get('code') + const inviteCode = searchParams.get('code')?.toLowerCase() const redirectUri = searchParams.get('redirect_uri') - const campaign = searchParams.get('campaign') - const { user, isFetchingUser } = useAuth() + const campaignParam = searchParams.get('campaign') + const { user, isFetchingUser, fetchUser } = useAuth() + + // determine campaign tag: use query param if provided, otherwise check invite code mapping + const campaign = campaignParam || (inviteCode ? INVITE_CODE_TO_CAMPAIGN_MAP[inviteCode] : undefined) const dispatch = useAppDispatch() const router = useRouter() const { handleLoginClick, isLoggingIn } = useLogin() + const [isAwardingBadge, setIsAwardingBadge] = useState(false) + const hasStartedAwardingRef = useRef(false) + + // Track if we should show content (prevents flash) + const [shouldShowContent, setShouldShowContent] = useState(false) const { data: inviteCodeData, @@ -38,26 +52,65 @@ function InvitePageContent() { enabled: !!inviteCode, }) - // Redirect logged-in users who already have app access to the inviter's profile - // Users without app access should stay on this page to claim the invite and get access + // determine if we should show content based on user state useEffect(() => { - // Wait for both user and invite data to be loaded + // if still fetching user, don't show content yet + if (isFetchingUser) { + setShouldShowContent(false) + return + } + + // if user has app access and no redirect URI, they'll be redirected + // don't show content in this case + if (!redirectUri && user?.user?.hasAppAccess && !isError) { + setShouldShowContent(false) + return + } + + // otherwise, safe to show content + setShouldShowContent(true) + }, [user, isFetchingUser, redirectUri, isError]) + + // redirect logged-in users who already have app access + // users without app access should stay on this page to claim the invite and get access + useEffect(() => { + // wait for both user and invite data to be loaded if (!user?.user || !inviteCodeData || isLoading || isFetchingUser) { return } - // If user has app access and invite is valid, redirect to inviter's profile, if a campaign is provided, award the badge and redirect to the home page + // prevent running the effect multiple times (ref doesn't trigger re-renders) + if (hasStartedAwardingRef.current) { + return + } + + // if user has app access and invite is valid, handle redirect if (!redirectUri && user.user.hasAppAccess && inviteCodeData.success && inviteCodeData.username) { - // If the potential ambassador is already a peanut user, simply award the badge and redirect to the home page + // if campaign is present, award the badge and redirect to home if (campaign) { - invitesApi.awardBadge(campaign).then(() => { - router.push('/home') - }) + hasStartedAwardingRef.current = true + setIsAwardingBadge(true) + invitesApi + .awardBadge(campaign) + .then(async () => { + // refetch user data to get the newly awarded badge + await fetchUser() + router.push('/home') + }) + .catch(async () => { + // if badge awarding fails, still refetch and redirect + await fetchUser() + router.push('/home') + }) + .finally(() => { + setIsAwardingBadge(false) + }) } else { + // no campaign, just redirect to inviter's profile router.push(`/${inviteCodeData.username}`) } } - }, [user, inviteCodeData, isLoading, isFetchingUser, router, campaign, redirectUri]) + }, [user, inviteCodeData, isLoading, isFetchingUser, router, campaign, redirectUri, fetchUser]) const handleClaimInvite = async () => { if (inviteCode) { @@ -76,7 +129,12 @@ function InvitePageContent() { } } - if (isLoading || isFetchingUser) { + // show loading if: + // 1. user data is being fetched + // 2. badge is being awarded + // 3. invite code is being validated + // 4. we determined content shouldn't be shown yet + if (isFetchingUser || isAwardingBadge || isLoading || !shouldShowContent) { return } From 89ba102c30c671f1dc577ebd5a383c4ad6dc8c07 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 14 Nov 2025 12:44:07 -0300 Subject: [PATCH 093/121] refactor: remove hugo's bad code :*) --- .../Global/TokenAmountInput/index.tsx | 76 +++---------------- 1 file changed, 11 insertions(+), 65 deletions(-) diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx index 08f6d4ec0..e9f278ade 100644 --- a/src/components/Global/TokenAmountInput/index.tsx +++ b/src/components/Global/TokenAmountInput/index.tsx @@ -65,9 +65,6 @@ const TokenAmountInput = ({ const searchParams = useSearchParams() const inputRef = useRef(null) const inputType = useMemo(() => (window.innerWidth < 640 ? 'text' : 'number'), []) - const isInternalUpdateRef = useRef(false) - const prevTokenValueRef = useRef(tokenValue) - const hasUserInputRef = useRef(false) const [isFocused, setIsFocused] = useState(false) const { deviceType } = useDeviceType() // Only autofocus on desktop (WEB), not on mobile devices (IOS/ANDROID) @@ -80,14 +77,6 @@ const TokenAmountInput = ({ const [alternativeDisplayValue, setAlternativeDisplayValue] = useState('0.00') const [alternativeDisplaySymbol, setAlternativeDisplaySymbol] = useState('') - // Reset hasUserInputRef when tokenValue changes from undefined to defined (new QR/flow) - useEffect(() => { - if (tokenValue && !prevTokenValueRef.current) { - // New value loaded (e.g., QR scan), reset user input flag - hasUserInputRef.current = false - } - }, [tokenValue]) - const displayMode = useMemo<'TOKEN' | 'STABLE' | 'FIAT'>(() => { if (currency) return 'FIAT' if (selectedTokenData?.symbol && STABLE_COINS.includes(selectedTokenData?.symbol)) { @@ -134,12 +123,9 @@ const TokenAmountInput = ({ ) const onChange = useCallback( - (value: string, _isInputUsd: boolean, isUserInput: boolean = false) => { + (value: string, _isInputUsd: boolean) => { setDisplayValue(value) setAlternativeDisplayValue(calculateAlternativeValue(value)) - if (isUserInput) { - hasUserInputRef.current = true - } let tokenValue: string switch (displayMode) { case 'STABLE': { @@ -163,7 +149,6 @@ const TokenAmountInput = ({ throw new Error('Invalid display mode') } } - prevTokenValueRef.current = tokenValue // Track that we're updating it setTokenValue(tokenValue) }, [displayMode, currency?.price, selectedTokenData?.price, calculateAlternativeValue] @@ -191,13 +176,10 @@ const TokenAmountInput = ({ } const selectedAmountStr = parseFloat(selectedAmount.toFixed(4)).toString() - const maxDecimals = - displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd - ? PEANUT_WALLET_TOKEN_DECIMALS - : decimals + const maxDecimals = displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 2 : decimals const formattedAmount = formatTokenAmount(selectedAmountStr, maxDecimals, true) if (formattedAmount) { - onChange(formattedAmount, isInputUsd, true) // Mark slider as user input + onChange(formattedAmount, isInputUsd) } } }, @@ -215,46 +197,15 @@ const TokenAmountInput = ({ useEffect(() => { // early return if tokenValue is empty. if (!tokenValue) return - // Prevent loop: skip if this update was triggered by this useEffect - if (isInternalUpdateRef.current) { - isInternalUpdateRef.current = false - return - } - - // Only run if tokenValue changed externally (from parent prop, not from our onChange) - const isExternalChange = prevTokenValueRef.current !== tokenValue - // Don't reconvert if user has manually entered a value (prevents precision errors on round-trip) - // But DO reconvert if the price changed significantly (token/currency selector change) - if (hasUserInputRef.current && displayValue && isExternalChange) { - // Check if this is a small precision change vs a major price change - const oldUsdValue = prevTokenValueRef.current ? Number(prevTokenValueRef.current) : 0 - const newUsdValue = tokenValue ? Number(tokenValue) : 0 - const percentChange = oldUsdValue ? Math.abs((newUsdValue - oldUsdValue) / oldUsdValue) : 1 - - // If change is < 1%, it's likely a precision round-trip, keep user's display - // If change is >= 1%, it's a real change (price update, new QR), reconvert - if (percentChange < 0.01) { - prevTokenValueRef.current = tokenValue - return // Skip reconversion for small precision differences - } - // Large change detected, reset flag and proceed with conversion - hasUserInputRef.current = false - } - - prevTokenValueRef.current = tokenValue - - if (!isInitialInputUsd && (isExternalChange || !displayValue)) { + if (!isInitialInputUsd) { const value = tokenValue ? Number(tokenValue) : 0 - const calculatedValue = value * (currency?.price ?? 1) - const formattedValue = formatTokenAmount(calculatedValue, PEANUT_WALLET_TOKEN_DECIMALS) ?? '0' - isInternalUpdateRef.current = true - hasUserInputRef.current = false // Reset after external update + const formattedValue = (value * (currency?.price ?? 1)).toFixed(2) onChange(formattedValue, isInputUsd) - } else if (isInitialInputUsd) { + } else { onChange(displayValue, isInputUsd) } - }, [selectedTokenData?.price, currency?.price, isInitialInputUsd, tokenValue]) + }, [selectedTokenData?.price]) // Seriously, this is ok useEffect(() => { switch (displayMode) { @@ -326,10 +277,7 @@ const TokenAmountInput = ({ // Sync default slider suggested amount to the input useEffect(() => { if (defaultSliderSuggestedAmount) { - const formattedAmount = formatTokenAmount( - defaultSliderSuggestedAmount.toString(), - PEANUT_WALLET_TOKEN_DECIMALS - ) + const formattedAmount = formatTokenAmount(defaultSliderSuggestedAmount.toString(), 2) if (formattedAmount) { setTokenValue(formattedAmount) setDisplayValue(formattedAmount) @@ -356,16 +304,14 @@ const TokenAmountInput = ({ placeholder={'0.00'} onChange={(e) => { let value = e.target.value - // USD/currency → 6 decimals; token input → allow `decimals` (<= 6) + // USD/currency → 2 decimals; token input → allow `decimals` (<= 6) const maxDecimals = - displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd - ? PEANUT_WALLET_TOKEN_DECIMALS - : decimals + displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 2 : decimals const formattedAmount = formatTokenAmount(value, maxDecimals, true) if (formattedAmount !== undefined) { value = formattedAmount } - onChange(value, isInputUsd, true) // Mark as user input + onChange(value, isInputUsd) }} ref={inputRef} inputMode="decimal" From a20dc9f2c48ab76fcb830748ff013e692334b032 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 14 Nov 2025 12:48:47 -0300 Subject: [PATCH 094/121] fix: cr comment --- src/components/Common/ActionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Common/ActionList.tsx b/src/components/Common/ActionList.tsx index 782a93985..3ee31b46c 100644 --- a/src/components/Common/ActionList.tsx +++ b/src/components/Common/ActionList.tsx @@ -336,7 +336,7 @@ export default function ActionList({ let methodRequiresVerification = method.id === 'bank' && requiresVerification - if ((!isUserMantecaKycApproved && method.id == 'mercadopago') || method.id == 'pix') { + if (!isUserMantecaKycApproved && ['mercadopago', 'pix'].includes(method.id)) { methodRequiresVerification = true } From b7d73f793db6a03d76c4a870c5d20b04d79282da Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 14 Nov 2025 13:05:38 -0300 Subject: [PATCH 095/121] revert: token decimal change --- .../Request/link/views/Create.request.link.view.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Request/link/views/Create.request.link.view.tsx b/src/components/Request/link/views/Create.request.link.view.tsx index e57e0bb02..80a64e634 100644 --- a/src/components/Request/link/views/Create.request.link.view.tsx +++ b/src/components/Request/link/views/Create.request.link.view.tsx @@ -9,7 +9,7 @@ import PeanutActionCard from '@/components/Global/PeanutActionCard' import QRCodeWrapper from '@/components/Global/QRCodeWrapper' import ShareButton from '@/components/Global/ShareButton' import TokenAmountInput from '@/components/Global/TokenAmountInput' -import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants' +import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants' import { TRANSACTIONS } from '@/constants/query.consts' import * as context from '@/context' import { useAuth } from '@/context/authContext' @@ -39,7 +39,7 @@ export const CreateRequestLinkView = () => { // Sanitize amount and limit to 2 decimal places const sanitizedAmount = useMemo(() => { if (!paramsAmount || isNaN(parseFloat(paramsAmount))) return '' - return formatTokenAmount(paramsAmount, PEANUT_WALLET_TOKEN_DECIMALS) ?? '' + return formatTokenAmount(paramsAmount, 2) ?? '' }, [paramsAmount]) const merchant = searchParams.get('merchant') const merchantComment = merchant ? `Bill split for ${merchant}` : null From f0ab95041549ee9057304b4bb3e8f8f3381ab779 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 14 Nov 2025 13:22:53 -0300 Subject: [PATCH 096/121] fix: badge copy --- src/components/Badges/badge.utils.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Badges/badge.utils.ts b/src/components/Badges/badge.utils.ts index 37e2aba0e..65c82761f 100644 --- a/src/components/Badges/badge.utils.ts +++ b/src/components/Badges/badge.utils.ts @@ -27,8 +27,7 @@ const PUBLIC_DESCRIPTIONS: Record = { MOST_INVITES: 'Onboarded more users than Coinbase ads!', BIGGEST_REQUEST_POT: 'High Roller or Master Beggar? They created the pot with the highest number of contributors.', SEEDLING_DEVCONNECT_BA_2025: 'Peanut Ambassador. They spread the word and brought others into the ecosystem.', - ARBIVERSE_DEVCONNECT_BA_2025: - 'Peanut 🤝 Arbiverse. They joined us at the amazing Arbiverse booth during Devconnect 2025.', + ARBIVERSE_DEVCONNECT_BA_2025: 'Peanut 🤝 Arbiverse. They joined us at the amazing Arbiverse booth.', } export function getBadgeIcon(code?: string) { From 1190a3ce3e221de8ccdce5fe1f05848b9f93cad2 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 14 Nov 2025 15:36:57 -0300 Subject: [PATCH 097/121] chore: update peanut icon to beta --- .../icons/apple-touch-icon-152x152-beta.png | Bin 0 -> 5726 bytes public/icons/apple-touch-icon-152x152.png | Bin 4033 -> 0 bytes ...uch-icon.png => apple-touch-icon-beta.png} | Bin public/icons/icon-192x192-beta.png | Bin 0 -> 5726 bytes public/icons/icon-192x192.png | Bin 5195 -> 0 bytes public/icons/icon-512x512-beta.png | Bin 0 -> 19231 bytes public/icons/icon-512x512.png | Bin 15420 -> 0 bytes public/icons/peanut-icon.svg | 51 +++++++++++------- src/app/manifest.ts | 14 ++--- 9 files changed, 41 insertions(+), 24 deletions(-) create mode 100644 public/icons/apple-touch-icon-152x152-beta.png delete mode 100644 public/icons/apple-touch-icon-152x152.png rename public/icons/{apple-touch-icon.png => apple-touch-icon-beta.png} (100%) create mode 100644 public/icons/icon-192x192-beta.png delete mode 100644 public/icons/icon-192x192.png create mode 100644 public/icons/icon-512x512-beta.png delete mode 100644 public/icons/icon-512x512.png diff --git a/public/icons/apple-touch-icon-152x152-beta.png b/public/icons/apple-touch-icon-152x152-beta.png new file mode 100644 index 0000000000000000000000000000000000000000..a7e5ddd99c7f466b13aa9773ff2d5f46abfb2944 GIT binary patch literal 5726 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 HgBbole7H&_ literal 0 HcmV?d00001 diff --git a/public/icons/apple-touch-icon-152x152.png b/public/icons/apple-touch-icon-152x152.png deleted file mode 100644 index 4722fb99b6dbdf868cffbe03bfba1909d8b80a5c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4033 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 diff --git a/public/icons/apple-touch-icon.png b/public/icons/apple-touch-icon-beta.png similarity index 100% rename from public/icons/apple-touch-icon.png rename to public/icons/apple-touch-icon-beta.png diff --git a/public/icons/icon-192x192-beta.png b/public/icons/icon-192x192-beta.png new file mode 100644 index 0000000000000000000000000000000000000000..a7e5ddd99c7f466b13aa9773ff2d5f46abfb2944 GIT binary patch literal 5726 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 HgBbole7H&_ literal 0 HcmV?d00001 diff --git a/public/icons/icon-192x192.png b/public/icons/icon-192x192.png deleted file mode 100644 index b7acba229f60eddf0fc1752463576d3bde52c0d3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5195 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 diff --git a/public/icons/icon-512x512-beta.png b/public/icons/icon-512x512-beta.png new file mode 100644 index 0000000000000000000000000000000000000000..375cdc578f3e4d955aa3d5e594be6e3a0c055f2f GIT binary patch literal 19231 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 - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/manifest.ts b/src/app/manifest.ts index c5280a9e5..820f7aa4c 100644 --- a/src/app/manifest.ts +++ b/src/app/manifest.ts @@ -1,5 +1,7 @@ import type { MetadataRoute } from 'next' +// note: @dev incase you wanna change the icons, +// better approach is to rename the image files so that browsers dont serve the cached old ones export default function manifest(): MetadataRoute.Manifest { let name = 'Peanut' switch (process.env.NODE_ENV) { @@ -21,36 +23,36 @@ export default function manifest(): MetadataRoute.Manifest { theme_color: '#000000', icons: [ { - src: '/icons/icon-192x192.png', + src: '/icons/icon-192x192-beta.png', sizes: '192x192', type: 'image/png', purpose: 'maskable', }, { - src: '/icons/icon-512x512.png', + src: '/icons/icon-512x512-beta.png', sizes: '512x512', type: 'image/png', purpose: 'maskable', }, { - src: '/icons/icon-192x192.png', + src: '/icons/icon-192x192-beta.png', sizes: '192x192', type: 'image/png', purpose: 'any', }, { - src: '/icons/icon-512x512.png', + src: '/icons/icon-512x512-beta.png', sizes: '512x512', type: 'image/png', purpose: 'any', }, { - src: '/icons/apple-touch-icon.png', + src: '/icons/apple-touch-icon-beta.png', sizes: '180x180', type: 'image/png', }, { - src: '/icons/apple-touch-icon-152x152.png', + src: '/icons/apple-touch-icon-152x152-beta.png', sizes: '152x152', type: 'image/png', }, From 696b87b13ab757922776d106035fff2e9aef6a0c Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Fri, 14 Nov 2025 16:01:56 -0300 Subject: [PATCH 098/121] fix: text padding and disable locked regions --- src/components/Global/NavHeader/index.tsx | 9 ++++++++- .../Profile/views/RegionsVerification.view.tsx | 7 ++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/Global/NavHeader/index.tsx b/src/components/Global/NavHeader/index.tsx index af01e93b3..01026f708 100644 --- a/src/components/Global/NavHeader/index.tsx +++ b/src/components/Global/NavHeader/index.tsx @@ -13,6 +13,7 @@ interface NavHeaderProps { hideLabel?: boolean icon?: IconName showLogoutBtn?: boolean + titleClassName?: string } const NavHeader = ({ @@ -23,6 +24,7 @@ const NavHeader = ({ onPrev, disableBackBtn, showLogoutBtn = false, + titleClassName, }: NavHeaderProps) => { const { logoutUser, isLoggingOut } = useAuth() @@ -48,7 +50,12 @@ const NavHeader = ({ )} {!hideLabel && ( -
+
{title}
)} diff --git a/src/components/Profile/views/RegionsVerification.view.tsx b/src/components/Profile/views/RegionsVerification.view.tsx index 056d4be63..d528b9d85 100644 --- a/src/components/Profile/views/RegionsVerification.view.tsx +++ b/src/components/Profile/views/RegionsVerification.view.tsx @@ -16,7 +16,11 @@ const RegionsVerification = () => { return (
- router.replace('/profile')} /> + router.replace('/profile')} + titleClassName="text-xl md:text-2xl" + />

Unlocked regions

@@ -71,6 +75,7 @@ const RegionsList = ({ regions, isLocked }: RegionsListProps) => { router.push(`/profile/identity-verification/${region.path}`) } }} + isDisabled={isLocked} description={region.description} descriptionClassName="text-xs" rightContent={!isLocked ? : null} From 95de5ed357a12e706ab410b53b121e8693fa97f4 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Fri, 14 Nov 2025 16:04:59 -0300 Subject: [PATCH 099/121] fix: correct disabled state for regions based on lock status --- src/components/Profile/views/RegionsVerification.view.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Profile/views/RegionsVerification.view.tsx b/src/components/Profile/views/RegionsVerification.view.tsx index d528b9d85..dd05a92ed 100644 --- a/src/components/Profile/views/RegionsVerification.view.tsx +++ b/src/components/Profile/views/RegionsVerification.view.tsx @@ -75,7 +75,7 @@ const RegionsList = ({ regions, isLocked }: RegionsListProps) => { router.push(`/profile/identity-verification/${region.path}`) } }} - isDisabled={isLocked} + isDisabled={!isLocked} description={region.description} descriptionClassName="text-xs" rightContent={!isLocked ? : null} From 7bc45af884aa1680a26acaf71f1b3c2b014af127 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 14 Nov 2025 16:08:26 -0300 Subject: [PATCH 100/121] fix: use new icons in sw --- src/app/actions.ts | 2 +- src/app/manifest.ts | 1 + src/app/sw.ts | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/actions.ts b/src/app/actions.ts index 03d6236f6..6aacf0936 100644 --- a/src/app/actions.ts +++ b/src/app/actions.ts @@ -102,7 +102,7 @@ export async function sendNotification( JSON.stringify({ title, message, - icon: '/icons/icon-192x192.png', + icon: '/icons/icon-192x192-beta.png', }) ) return { success: true } diff --git a/src/app/manifest.ts b/src/app/manifest.ts index 820f7aa4c..ac5857891 100644 --- a/src/app/manifest.ts +++ b/src/app/manifest.ts @@ -2,6 +2,7 @@ import type { MetadataRoute } from 'next' // note: @dev incase you wanna change the icons, // better approach is to rename the image files so that browsers dont serve the cached old ones +// also, do not forget to update the icons in the service worker and actions.ts file export default function manifest(): MetadataRoute.Manifest { let name = 'Peanut' switch (process.env.NODE_ENV) { diff --git a/src/app/sw.ts b/src/app/sw.ts index fba35666c..db0ee4bf7 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -406,7 +406,7 @@ self.addEventListener('push', (event) => { body: data.message, tag: 'notification', vibrate: [100, 50, 100], // Mobile notification vibration pattern - icon: '/icons/icon-192x192.png', + icon: '/icons/icon-192x192-beta.png', } as NotificationOptions) ) }) From d5cd11380732984287783d03041f8599824682e7 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Fri, 14 Nov 2025 16:15:29 -0300 Subject: [PATCH 101/121] fix: padding --- src/components/Profile/views/RegionsVerification.view.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Profile/views/RegionsVerification.view.tsx b/src/components/Profile/views/RegionsVerification.view.tsx index dd05a92ed..95d573106 100644 --- a/src/components/Profile/views/RegionsVerification.view.tsx +++ b/src/components/Profile/views/RegionsVerification.view.tsx @@ -21,7 +21,7 @@ const RegionsVerification = () => { onPrev={() => router.replace('/profile')} titleClassName="text-xl md:text-2xl" /> -

+

Unlocked regions

Transfer to and receive from any bank account and use supported payments methods. @@ -37,7 +37,7 @@ const RegionsVerification = () => { -

Locked regions

+

Locked regions

Where do you want to send and receive money?

@@ -55,7 +55,7 @@ interface RegionsListProps { const RegionsList = ({ regions, isLocked }: RegionsListProps) => { const router = useRouter() return ( -
+
{regions.map((region, index) => ( Date: Fri, 14 Nov 2025 16:23:47 -0300 Subject: [PATCH 102/121] add padding to empty state --- src/components/Global/EmptyStates/EmptyState.tsx | 4 ++-- src/components/Profile/views/RegionsVerification.view.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Global/EmptyStates/EmptyState.tsx b/src/components/Global/EmptyStates/EmptyState.tsx index 0dc47fca1..5a5b41e49 100644 --- a/src/components/Global/EmptyStates/EmptyState.tsx +++ b/src/components/Global/EmptyStates/EmptyState.tsx @@ -14,8 +14,8 @@ interface EmptyStateProps { // EmptyState component - Used for dispalying when there's no data in a certain scneario and we want to inform users with a cta (optional) export default function EmptyState({ title, description, icon, cta, containerClassName }: EmptyStateProps) { return ( - -
+ +
diff --git a/src/components/Profile/views/RegionsVerification.view.tsx b/src/components/Profile/views/RegionsVerification.view.tsx index 95d573106..925482cfd 100644 --- a/src/components/Profile/views/RegionsVerification.view.tsx +++ b/src/components/Profile/views/RegionsVerification.view.tsx @@ -32,6 +32,7 @@ const RegionsVerification = () => { title="You haven't unlocked any countries yet." description="No countries unlocked yet. Complete verification to unlock countries and use supported payment methods." icon="globe-lock" + containerClassName="mt-3" /> )} From db808e341309a8aa4a41d7289def764440416bb2 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Fri, 14 Nov 2025 16:39:09 -0300 Subject: [PATCH 103/121] fix: devconnect claim methods --- src/components/Common/ActionList.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Common/ActionList.tsx b/src/components/Common/ActionList.tsx index 114030041..e40d6fb2a 100644 --- a/src/components/Common/ActionList.tsx +++ b/src/components/Common/ActionList.tsx @@ -133,7 +133,9 @@ export default function ActionList({ method.soon || (method.id === 'bank' && requiresVerification) || (['mercadopago', 'pix'].includes(method.id) && !isUserMantecaKycApproved), - methods: showDevconnectMethod ? DEVCONNECT_CLAIM_METHODS : undefined, + methods: showDevconnectMethod + ? DEVCONNECT_CLAIM_METHODS.filter((method) => method.id !== 'devconnect') + : undefined, }) // Check if user has enough Peanut balance to pay for the request From 2bf31afc9d1c4406a1ceb5aff2abd048e85f9ab9 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Fri, 14 Nov 2025 17:18:28 -0300 Subject: [PATCH 104/121] Feat: Hide verify to unlock button for RoW countries list --- src/components/Profile/views/RegionsPage.view.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Profile/views/RegionsPage.view.tsx b/src/components/Profile/views/RegionsPage.view.tsx index a02fb1720..a59d4f6b8 100644 --- a/src/components/Profile/views/RegionsPage.view.tsx +++ b/src/components/Profile/views/RegionsPage.view.tsx @@ -11,6 +11,8 @@ const RegionsPage = ({ path }: { path: string }) => { const router = useRouter() const { lockedRegions } = useIdentityVerification() + const hideVerifyButtonPaths = ['latam', 'rest-of-the-world'] + const region = lockedRegions.find((region) => region.path === path) if (!region) { @@ -24,7 +26,7 @@ const RegionsPage = ({ path }: { path: string }) => {
- {region.path !== 'latam' && ( + {!hideVerifyButtonPaths.includes(region.path) && (
{error && }
+ + {address && ( + setShowModal(false)} + > + {({ onClick, disabled, loading }) => ( + { + setShowModal(false) + }} + title="IMPORTANT!" + titleClassName="text-lg font-bold text-black" + icon="alert" + iconContainerClassName="bg-secondary-1" + content={ +
+

You MUST:

+ + + + + + This deposit is processed by Daimo, a third-party provider.{' '} + + Deposit with Arbitrum USDC + {' '} + for a simple and free deposit. +

+ } + /> + + { + setShowModal(false) + // Small delay to allow modal close animation, then trigger Daimo + setTimeout(() => { + onClick() + }, 300) + }} + /> +
+ } + /> + )} + + )} ) } diff --git a/src/components/Global/Icons/Icon.tsx b/src/components/Global/Icons/Icon.tsx index 66ff79396..048dd5b94 100644 --- a/src/components/Global/Icons/Icon.tsx +++ b/src/components/Global/Icons/Icon.tsx @@ -65,6 +65,7 @@ import { InviteHeartIcon } from './invite-heart' import { LockIcon } from './lock' import { SplitIcon } from './split' import { GlobeLockIcon } from './globe-lock' +import { BulbIcon } from './bulb' // available icon names export type IconName = @@ -134,6 +135,7 @@ export type IconName = | 'lock' | 'split' | 'globe-lock' + | 'bulb' export interface IconProps extends SVGProps { name: IconName size?: number | string @@ -207,6 +209,7 @@ const iconComponents: Record>> = lock: LockIcon, split: SplitIcon, 'globe-lock': GlobeLockIcon, + bulb: BulbIcon, } export const Icon: FC = ({ name, size = 24, width, height, ...props }) => { diff --git a/src/components/Global/Icons/bulb.tsx b/src/components/Global/Icons/bulb.tsx new file mode 100644 index 000000000..92de9e363 --- /dev/null +++ b/src/components/Global/Icons/bulb.tsx @@ -0,0 +1,11 @@ +import { type FC, type SVGProps } from 'react' + +export const BulbIcon: FC> = (props) => ( + + + +) diff --git a/src/components/Global/InfoCard/index.tsx b/src/components/Global/InfoCard/index.tsx index 59beec739..38fcb1eb2 100644 --- a/src/components/Global/InfoCard/index.tsx +++ b/src/components/Global/InfoCard/index.tsx @@ -18,6 +18,7 @@ interface InfoCardProps { itemIcon?: IconProps['name'] itemIconSize?: number itemIconClassName?: string + containerClassName?: string } const VARIANT_CLASSES = { @@ -44,13 +45,14 @@ const InfoCard = ({ itemIcon, itemIconSize = 16, itemIconClassName, + containerClassName, }: InfoCardProps) => { const variantClasses = VARIANT_CLASSES[variant] const hasContent = title || description || items return ( -
+
{icon && ( Date: Sat, 15 Nov 2025 14:49:56 -0300 Subject: [PATCH 115/121] fix: better error message for expired/stale payment --- src/app/(mobile-ui)/qr-pay/page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index 4df976042..77b2a7681 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -688,7 +688,9 @@ export default function QRPayPage() { } else if (errorMsg.toLowerCase().includes('expired') || errorMsg.toLowerCase().includes('stale')) { setErrorMessage('Payment session expired. Please scan the QR code again.') } else { - setErrorMessage('Could not complete payment. Please contact support.') + setErrorMessage( + 'Could not complete payment. Please scan the QR code again. If problem persists contact support' + ) } setIsSuccess(false) } finally { From f84c1313325c7ee1821be17fc5faf4e0ddcc6fe1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= Date: Sat, 15 Nov 2025 17:01:06 -0300 Subject: [PATCH 116/121] feat: better loading screen for qr pay --- src/app/(mobile-ui)/qr-pay/page.tsx | 36 +++++++++++-------- src/components/Global/PeanutLoading/index.tsx | 31 ++++++++++------ 2 files changed, 42 insertions(+), 25 deletions(-) diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index 77b2a7681..030adece2 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -52,11 +52,9 @@ import type { HistoryEntry } from '@/hooks/useTransactionHistory' import { completeHistoryEntry } from '@/utils/history.utils' import { useSupportModalContext } from '@/context/SupportModalContext' import maintenanceConfig from '@/config/underMaintenance.config' -// Lazy load 800KB success animation - only needed on success screen, not initial load -// CRITICAL: This GIF is 80% of the /qr-pay bundle size. Load it dynamically. -const chillPeanutAnim = '/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif' const MAX_QR_PAYMENT_AMOUNT = '2000' +const MIN_QR_PAYMENT_AMOUNT = '0.1' type PaymentProcessor = 'MANTECA' | 'SIMPLEFI' @@ -251,6 +249,12 @@ export default function QRPayPage() { [pendingSimpleFiPaymentId, simpleFiPayment, setLoadingState] ) + useEffect(() => { + if (isSuccess) { + setLoadingState('Idle') + } + }, [isSuccess]) + // First fetch for qrcode info — only after KYC gating allows proceeding useEffect(() => { resetState() @@ -650,7 +654,7 @@ export default function QRPayPage() { // Send signed UserOp to backend for coordinated execution // Backend will: 1) Complete Manteca payment, 2) Broadcast UserOp only if Manteca succeeds - setLoadingState('Paying') + setTimeout(() => setLoadingState('Paying'), 3000) try { const signedUserOp = { sender: signedUserOpData.signedUserOp.sender, @@ -897,6 +901,8 @@ export default function QRPayPage() { // Common validations for all payment processors if (paymentAmount > parseUnits(MAX_QR_PAYMENT_AMOUNT, PEANUT_WALLET_TOKEN_DECIMALS)) { setBalanceErrorMessage(`QR payment amount exceeds maximum limit of $${MAX_QR_PAYMENT_AMOUNT}`) + } else if (paymentAmount < parseUnits(MIN_QR_PAYMENT_AMOUNT, PEANUT_WALLET_TOKEN_DECIMALS)) { + setBalanceErrorMessage(`QR payment amount must be at least $${MIN_QR_PAYMENT_AMOUNT}`) } else if (paymentAmount > balance) { setBalanceErrorMessage('Not enough balance to complete payment. Add funds!') } else { @@ -1029,11 +1035,6 @@ export default function QRPayPage() { ) } - // Show peanut facts loading screen when paying - if (loadingState?.toLowerCase() === 'paying') { - return - } - // check if we're still loading payment data or KYC state before showing anything // this prevents KYC modals from flashing on page refresh const isLoadingPaymentData = @@ -1156,14 +1157,18 @@ export default function QRPayPage() { } // show loading spinner if we're still loading payment data OR KYC state - if (isLoadingPaymentData || isLoadingKycState) { - return + if (isLoadingPaymentData || isLoadingKycState || loadingState.toLowerCase() === 'paying') { + return ( + + ) } //Success if (isSuccess && paymentProcessor === 'MANTECA' && !qrPayment) { return null - } else if (isSuccess && paymentProcessor === 'MANTECA' && qrPayment) { + } else if (isSuccess && paymentProcessor === 'MANTECA') { // Calculate savings for Argentina Manteca QR payments only const savingsInCents = calculateSavingsInCents(usdAmount) const showSavingsMessage = savingsInCents > 0 && isArgentinaMantecaQrPayment(qrType, paymentProcessor) @@ -1189,11 +1194,14 @@ export default function QRPayPage() {

- You paid {qrPayment!.details.merchant.name} + You paid {qrPayment?.details.merchant.name ?? paymentLock?.paymentRecipientName}

{currency.symbol}{' '} - {formatNumberForDisplay(qrPayment!.details.paymentAssetAmount, { maxDecimals: 2 })} + {formatNumberForDisplay( + qrPayment?.details.paymentAssetAmount ?? paymentLock?.paymentAssetAmount, + { maxDecimals: 2 } + )}
≈ {formatNumberForDisplay(usdAmount ?? undefined, { maxDecimals: 2 })} USD diff --git a/src/components/Global/PeanutLoading/index.tsx b/src/components/Global/PeanutLoading/index.tsx index 12da1fc98..6d4a2d02f 100644 --- a/src/components/Global/PeanutLoading/index.tsx +++ b/src/components/Global/PeanutLoading/index.tsx @@ -1,19 +1,28 @@ import { PEANUTMAN_LOGO } from '@/assets' import { twMerge } from 'tailwind-merge' -export default function PeanutLoading({ coverFullScreen = false }: { coverFullScreen?: boolean }) { +export default function PeanutLoading({ + coverFullScreen = false, + message, +}: { + coverFullScreen?: boolean + message?: string +}) { return ( -
-
- logo - Loading... +
+
+
+ logo + {message ?? 'Loading...'} +
+
{message}
) } From 19b10baa255ef928869ebe28d034f2abee0387d4 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Sat, 15 Nov 2025 17:12:04 -0300 Subject: [PATCH 117/121] Update points card and add empty state --- src/app/(mobile-ui)/qr-pay/page.tsx | 16 +++++++--------- src/components/Common/PointsCard.tsx | 18 ++++++++++++++++++ src/components/Global/Card/index.tsx | 4 +++- .../Payment/Views/Status.payment.view.tsx | 10 ++-------- .../Profile/components/CountryListSection.tsx | 9 +++++++++ 5 files changed, 39 insertions(+), 18 deletions(-) create mode 100644 src/components/Common/PointsCard.tsx diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index 030adece2..c9dc85e31 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -52,6 +52,10 @@ import type { HistoryEntry } from '@/hooks/useTransactionHistory' import { completeHistoryEntry } from '@/utils/history.utils' import { useSupportModalContext } from '@/context/SupportModalContext' import maintenanceConfig from '@/config/underMaintenance.config' +import PointsCard from '@/components/Common/PointsCard' +// Lazy load 800KB success animation - only needed on success screen, not initial load +// CRITICAL: This GIF is 80% of the /qr-pay bundle size. Load it dynamically. +const chillPeanutAnim = '/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif' const MAX_QR_PAYMENT_AMOUNT = '2000' const MIN_QR_PAYMENT_AMOUNT = '0.1' @@ -1216,7 +1220,7 @@ export default function QRPayPage() { {/* Perk Eligibility Card - Show before claiming */} {qrPayment?.perk?.eligible && !perkClaimed && !qrPayment.perk.claimed && ( - +
star
@@ -1263,14 +1267,8 @@ export default function QRPayPage() { )} {/* Points Display - ref used for confetti origin point */} - {pointsData?.estimatedPoints && ( -
- star -

- You've earned {pointsData.estimatedPoints}{' '} - {pointsData.estimatedPoints === 1 ? 'point' : 'points'}! -

-
+ {!qrPayment?.perk?.eligible && pointsData?.estimatedPoints && ( + )}
diff --git a/src/components/Common/PointsCard.tsx b/src/components/Common/PointsCard.tsx new file mode 100644 index 000000000..a6da207a1 --- /dev/null +++ b/src/components/Common/PointsCard.tsx @@ -0,0 +1,18 @@ +import Image from 'next/image' + +import { STAR_STRAIGHT_ICON } from '@/assets' +import Card from '../Global/Card' +import InvitesIcon from '../Home/InvitesIcon' + +const PointsCard = ({ points, pointsDivRef }: { points: number; pointsDivRef: React.RefObject }) => { + return ( + + +

+ You've earned {points} {points === 1 ? 'point' : 'points'}! +

+ + ) +} + +export default PointsCard diff --git a/src/components/Global/Card/index.tsx b/src/components/Global/Card/index.tsx index f369e1c18..c9a26fc3d 100644 --- a/src/components/Global/Card/index.tsx +++ b/src/components/Global/Card/index.tsx @@ -9,6 +9,7 @@ interface CardProps { className?: string onClick?: () => void border?: boolean + ref?: React.RefObject } export function getCardPosition(index: number, totalItems: number): CardPosition { @@ -18,7 +19,7 @@ export function getCardPosition(index: number, totalItems: number): CardPosition return 'middle' } -const Card: React.FC = ({ children, position = 'single', className = '', onClick, border = true }) => { +const Card: React.FC = ({ children, position = 'single', className = '', onClick, border = true, ref }) => { const getBorderRadius = () => { switch (position) { case 'single': @@ -53,6 +54,7 @@ const Card: React.FC = ({ children, position = 'single', className = return (
diff --git a/src/components/Payment/Views/Status.payment.view.tsx b/src/components/Payment/Views/Status.payment.view.tsx index 91ca85a28..c8b916d61 100644 --- a/src/components/Payment/Views/Status.payment.view.tsx +++ b/src/components/Payment/Views/Status.payment.view.tsx @@ -27,6 +27,7 @@ import STAR_STRAIGHT_ICON from '@/assets/icons/starStraight.svg' import { usePointsConfetti } from '@/hooks/usePointsConfetti' import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif' import { useHaptic } from 'use-haptic' +import PointsCard from '@/components/Common/PointsCard' type DirectSuccessViewProps = { user?: ApiUser @@ -252,14 +253,7 @@ const DirectSuccessView = ({
- {points && ( -
- star -

- You've earned {points} {points === 1 ? 'point' : 'points'}! -

-
- )} + {points && }
{!!authUser?.user.userId ? ( diff --git a/src/components/Profile/components/CountryListSection.tsx b/src/components/Profile/components/CountryListSection.tsx index 803cb5f48..e6ea182fd 100644 --- a/src/components/Profile/components/CountryListSection.tsx +++ b/src/components/Profile/components/CountryListSection.tsx @@ -1,6 +1,7 @@ import { ActionListCard } from '@/components/ActionListCard' import { type CountryData } from '@/components/AddMoney/consts' import { getCardPosition } from '@/components/Global/Card' +import EmptyState from '@/components/Global/EmptyStates/EmptyState' import { Icon } from '@/components/Global/Icons/Icon' import * as Accordion from '@radix-ui/react-accordion' import Image from 'next/image' @@ -40,6 +41,14 @@ const CountryListSection = ({ {description &&

{description}

} + {countries.length === 0 && ( + + )} + {countries.map((country, index) => { const position = getCardPosition(index, countries.length) return ( From 223b2d9f8f3e3a95002f189630d6a47967e4460f Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Sat, 15 Nov 2025 17:12:57 -0300 Subject: [PATCH 118/121] remove change --- src/app/(mobile-ui)/qr-pay/page.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index c9dc85e31..252e01291 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -53,9 +53,6 @@ import { completeHistoryEntry } from '@/utils/history.utils' import { useSupportModalContext } from '@/context/SupportModalContext' import maintenanceConfig from '@/config/underMaintenance.config' import PointsCard from '@/components/Common/PointsCard' -// Lazy load 800KB success animation - only needed on success screen, not initial load -// CRITICAL: This GIF is 80% of the /qr-pay bundle size. Load it dynamically. -const chillPeanutAnim = '/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif' const MAX_QR_PAYMENT_AMOUNT = '2000' const MIN_QR_PAYMENT_AMOUNT = '0.1' From 2543f48c75bfd1f4de5a6ef9fe2ac1b99c26cc3f Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sat, 15 Nov 2025 17:16:32 -0300 Subject: [PATCH 119/121] feat: offline caching --- next.config.js | 44 +- src/app/(mobile-ui)/layout.tsx | 12 + src/app/sw.ts | 573 +----------------- src/components/Global/OfflineScreen/index.tsx | 161 +++++ src/hooks/useNetworkStatus.ts | 52 +- 5 files changed, 243 insertions(+), 599 deletions(-) create mode 100644 src/components/Global/OfflineScreen/index.tsx diff --git a/next.config.js b/next.config.js index 20a6355b2..b3e0d3715 100644 --- a/next.config.js +++ b/next.config.js @@ -75,25 +75,13 @@ let nextConfig = { webpackBuildWorker: true, }, - webpack: (config, { isServer, dev, webpack }) => { + webpack: (config, { isServer, dev }) => { if (!dev || !process.env.NEXT_TURBO) { if (isServer) { config.ignoreWarnings = [{ module: /@opentelemetry\/instrumentation/, message: /Critical dependency/ }] } } - // CRITICAL: Inject environment variables into Service Worker build - // Service Workers are isolated from the main app bundle and don't get NEXT_PUBLIC_* vars automatically - // This ensures SW can match the correct API hostname (staging vs prod) - config.plugins.push( - new webpack.DefinePlugin({ - 'process.env.NEXT_PUBLIC_PEANUT_API_URL': JSON.stringify( - process.env.PEANUT_API_URL || process.env.NEXT_PUBLIC_PEANUT_API_URL || 'https://api.peanut.me' - ), - 'process.env.NEXT_PUBLIC_API_VERSION': JSON.stringify(process.env.NEXT_PUBLIC_API_VERSION || 'v1'), - }) - ) - return config }, reactStrictMode: false, @@ -153,7 +141,7 @@ let nextConfig = { headers: [ { key: 'Permissions-Policy', - value: 'camera=*, microphone=*, clipboard-read=(self), clipboard-write=(self)', + value: 'camera=(self "*"), microphone=(self "*"), clipboard-read=(self), clipboard-write=(self)', }, ], }, @@ -161,7 +149,6 @@ let nextConfig = { }, } -// Apply Sentry wrapper in production if (process.env.NODE_ENV !== 'development' && !Boolean(process.env.LOCAL_BUILD)) { const { withSentryConfig } = require('@sentry/nextjs') @@ -209,21 +196,20 @@ if (process.env.NODE_ENV !== 'development' && !Boolean(process.env.LOCAL_BUILD)) deleteSourcemapsAfterUpload: true, }, }) +} else { + module.exports = nextConfig } -// Development: Only bundle analyzer (no Serwist or Sentry) -// Production: Sentry → Serwist → Bundle Analyzer if (process.env.NODE_ENV !== 'development') { - // Production: Wrap with Serwist and bundle analyzer - // NOTE: Serwist must be imported dynamically and configured synchronously - const withSerwist = require('@serwist/next').default({ - swSrc: './src/app/sw.ts', - swDest: 'public/sw.js', - }) - - // Apply in order: Sentry (already applied to nextConfig) → Serwist → Bundle Analyzer - module.exports = withBundleAnalyzer(withSerwist(nextConfig)) -} else { - // Development: only bundle analyzer (no Serwist) - module.exports = withBundleAnalyzer(nextConfig) + module.exports = async () => { + const withSerwist = (await import('@serwist/next')).default({ + swSrc: './src/app/sw.ts', + swDest: 'public/sw.js', + // explicitly include offline screen assets in precache + additionalPrecacheEntries: ['/icons/peanut-icon.svg'], + }) + return withSerwist(nextConfig) + } } + +module.exports = withBundleAnalyzer(nextConfig) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index 83cfed05a..b80369424 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -4,6 +4,7 @@ import GuestLoginModal from '@/components/Global/GuestLoginModal' import PeanutLoading from '@/components/Global/PeanutLoading' import TopNavbar from '@/components/Global/TopNavbar' import WalletNavigation from '@/components/Global/WalletNavigation' +import OfflineScreen from '@/components/Global/OfflineScreen' import { ThemeProvider } from '@/config' import { useAuth } from '@/context/authContext' import { hasValidJwtToken } from '@/utils/auth' @@ -20,6 +21,7 @@ import { useSetupStore } from '@/redux/hooks' import ForceIOSPWAInstall from '@/components/ForceIOSPWAInstall' import { PUBLIC_ROUTES_REGEX } from '@/constants/routes' import { usePullToRefresh } from '@/hooks/usePullToRefresh' +import { useNetworkStatus } from '@/hooks/useNetworkStatus' const Layout = ({ children }: { children: React.ReactNode }) => { const pathName = usePathname() @@ -38,6 +40,9 @@ const Layout = ({ children }: { children: React.ReactNode }) => { const router = useRouter() const { showIosPwaInstallScreen } = useSetupStore() + // detect online/offline status for full-page offline screen + const { isOnline, isInitialized } = useNetworkStatus() + // cache the scrollable content element to avoid DOM queries on every scroll event const scrollableContentRef = useRef(null) @@ -75,6 +80,13 @@ const Layout = ({ children }: { children: React.ReactNode }) => { } }, [user, isFetchingUser, isReady, isPublicPath, router]) + // show full-page offline screen when user is offline + // only show after initialization to prevent flash on initial load + // when connection is restored, page auto-reloads (no "back online" screen) + if (isInitialized && !isOnline) { + return + } + // For public paths, skip user loading and just show content when ready if (isPublicPath) { if (!isReady) { diff --git a/src/app/sw.ts b/src/app/sw.ts index db0ee4bf7..22a34cf60 100644 --- a/src/app/sw.ts +++ b/src/app/sw.ts @@ -1,401 +1,27 @@ -/// +import { defaultCache } from '@serwist/next/worker' import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist' -import { - Serwist, - NetworkFirst, - StaleWhileRevalidate, - CacheFirst, - CacheableResponsePlugin, - ExpirationPlugin, -} from 'serwist' - -// Cache name constants (inline version for SW - can't use @ imports in service worker context) -// These match src/constants/cache.consts.ts to ensure consistency -const CACHE_NAMES = { - USER_API: 'user-api', - TRANSACTIONS: 'transactions-api', - KYC_MERCHANT: 'kyc-merchant-api', - PRICES: 'prices-api', - EXTERNAL_RESOURCES: 'external-resources', -} as const - -const getCacheNameWithVersion = (name: string, version: string): string => `${name}-${version}` - -// Time constants for cache expiration (seconds) -const TIME = { - ONE_DAY: 60 * 60 * 24, - ONE_WEEK: 60 * 60 * 24 * 7, - THIRTY_DAYS: 60 * 60 * 24 * 30, - FIVE_MINUTES: 60 * 5, -} as const - -// ❌ RPC CACHING NOT SUPPORTED (commented out for future reference) -// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -// RPC provider hostnames - kept for documentation/future use -// -// ⚠️ CRITICAL LIMITATION: Blockchain RPC calls use POST method -// - Cache Storage API CANNOT cache POST requests (W3C spec limitation) -// - See: https://w3c.github.io/ServiceWorker/#cache-put (point 4) -// - All Ethereum JSON-RPC calls (eth_getBalance, eth_call, etc.) use POST -// - No RPC provider supports GET requests (not in JSON-RPC spec) -// -// 💡 ALTERNATIVES FOR FUTURE: -// 1. Server-side proxy: Convert RPC POST → GET via Next.js API route -// 2. IndexedDB: Manual caching with custom key generation (complex) -// 3. Accept limitation: Use TanStack Query in-memory cache only (current) -// -// When adding a new RPC provider to src/constants/general.consts.ts: -// - Extract hostname and add to this array for documentation -// - Remember: Cannot be cached by Service Worker (POST limitation) -/* -const RPC_HOSTNAMES = [ - 'alchemy.com', - 'infura.io', - 'chainstack.com', - 'arbitrum.io', - 'publicnode.com', - 'ankr.com', - 'polygon-rpc.com', - 'optimism.io', - 'base.org', - 'bnbchain.org', - 'public-rpc.com', - 'scroll.io', -] as const -*/ -// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +import { Serwist } from 'serwist' // This declares the value of `injectionPoint` to TypeScript. // `injectionPoint` is the string that will be replaced by the // actual precache manifest. By default, this string is set to // `"self.__SW_MANIFEST"`. -// Type-safe environment variable access for Next.js build-time injection -// Next.js replaces process.env.NEXT_PUBLIC_* at build time in Service Worker context -interface NextPublicEnv { - NEXT_PUBLIC_PEANUT_API_URL?: string - NEXT_PUBLIC_API_VERSION?: string -} - declare global { interface WorkerGlobalScope extends SerwistGlobalConfig { __SW_MANIFEST: (PrecacheEntry | string)[] | undefined } } +// @ts-ignore declare const self: ServiceWorkerGlobalScope -// Helper to access Next.js build-time injected env vars with type safety -// Uses double assertion to avoid 'as any' while maintaining type safety -const getEnv = (): NextPublicEnv => { - try { - return process.env as unknown as NextPublicEnv - } catch (e) { - console.error('[SW] ❌ Failed to access process.env:', e) - return {} - } -} - -const envVars = getEnv() - -// CRITICAL: Capture SW manifest immediately - Serwist replaces self.__SW_MANIFEST at build time -// and expects to see it ONLY ONCE in the entire file. Store it in a variable for reuse. -const precacheManifest = self.__SW_MANIFEST || [] - -/** - * Cache version tied to API version for automatic cache invalidation. - * - * @dev WHEN TO BUMP CACHE VERSION (NEXT_PUBLIC_API_VERSION): - * - * ✅ **DO BUMP** when: - * - API response structure changes (breaking changes) - * Example: User object adds/removes/renames fields - * - Cache strategy changes (NetworkFirst → CacheFirst, TTL changes, etc.) - * - Critical bug in cached data requires force refresh for all users - * - Database schema changes that affect API responses - * - * ❌ **DON'T BUMP** when: - * - Adding new endpoints (old caches unaffected) - * - Bug fixes that don't affect cached data structure - * - UI changes (CSS, components, etc.) - * - Most regular deployments - * - * 📦 **AUTOMATIC MIGRATION** (no manual intervention needed): - * 1. Deploy with new NEXT_PUBLIC_API_VERSION (v1 → v2) - * 2. Browser detects SW update, installs new version - * 3. On next page load, activate event fires - * 4. Old caches (user-api-v1) auto-deleted by cleanup code - * 5. New caches (user-api-v2) created on first request - * → Users seamlessly migrate to new cache version - * - * 💡 **EXAMPLE SCENARIOS**: - * - "Added new /api/notifications endpoint" → DON'T BUMP (new cache, no conflict) - * - "User.balance is now User.balances[]" → BUMP (breaking change) - * - "Changed user cache from 1 week to 1 day" → BUMP (strategy change) - * - "Fixed typo in component" → DON'T BUMP (UI only) - * - * Current version: Uses NEXT_PUBLIC_API_VERSION env var (set in Vercel/Railway or .env) - */ -const CACHE_VERSION = envVars.NEXT_PUBLIC_API_VERSION || 'v1' - -// Extract API hostname from build-time environment variable -// FALLBACK: If env var injection fails, default to production API -// This ensures SW works even if webpack DefinePlugin doesn't reach Serwist's build -const API_URL = envVars.NEXT_PUBLIC_PEANUT_API_URL || 'https://api.peanut.me' -const API_HOSTNAME = new URL(API_URL).hostname - -// Log configuration on initialization for debugging -console.log('[SW] ⚙️ Initialized with:', { API_HOSTNAME, CACHE_VERSION, entries: precacheManifest.length }) - -/** - * Matches API requests to the configured API hostname OR Next.js API routes - * Ensures caching works consistently across dev, staging, and production - */ -const isApiRequest = (url: URL): boolean => { - // Match direct API calls (production/staging) - if (url.hostname === API_HOSTNAME) return true - - // Match Next.js API routes (development: localhost:3000/api/...) - // These proxy to the real API, so they should be cached the same way - if (url.pathname.startsWith('/api/')) return true - - return false -} - -// NATIVE PWA: Custom caching strategies for API endpoints -// JWT token is in httpOnly cookies, so it's automatically sent with fetch requests const serwist = new Serwist({ - precacheEntries: precacheManifest, + precacheEntries: self.__SW_MANIFEST, skipWaiting: true, clientsClaim: true, navigationPreload: true, + runtimeCaching: defaultCache, disableDevLogs: false, - runtimeCaching: [ - // ═══════════════════════════════════════════════════════════════════ - // 🎯 TIERED NAVIGATION CACHE SYSTEM (iOS Quota Protection) - // ═══════════════════════════════════════════════════════════════════ - // iOS Safari: ~50MB total quota. Separate caches = granular eviction control. - // On quota exceeded, iOS evicts ENTIRE caches (not individual entries). - // Strategy: Separate critical pages into their own caches for protection. - - // 🔴 TIER 1 (CRITICAL): /home page - NEVER EVICT - // Landing page for PWA launch. Must always be available offline. - // Separate cache ensures it survives quota pressure from other pages. - // IMPORTANT: Also matches root '/' since Next.js redirects / → /home - { - matcher: ({ request, url }) => - request.mode === 'navigate' && (url.pathname === '/home' || url.pathname === '/'), - handler: new NetworkFirst({ - cacheName: 'navigation-home', - plugins: [ - new CacheableResponsePlugin({ - statuses: [0, 200], // 0 = opaque responses, 200 = success - }), - new ExpirationPlugin({ - maxEntries: 2, // /home and / (root) - maxAgeSeconds: TIME.THIRTY_DAYS, // 30 days (long TTL) - }), - ], - networkTimeoutSeconds: 3, // Fallback to cache after 3s network timeout - }), - }, - - // 🟡 TIER 2 (IMPORTANT): Key pages - Evict before /home - { - matcher: ({ request, url }) => - request.mode === 'navigate' && - ['/history', '/profile', '/points'].some((path) => url.pathname.startsWith(path)), - handler: new NetworkFirst({ - cacheName: 'navigation-important', - plugins: [ - new CacheableResponsePlugin({ - statuses: [0, 200], - }), - new ExpirationPlugin({ - maxEntries: 3, - maxAgeSeconds: TIME.ONE_WEEK, - }), - ], - networkTimeoutSeconds: 3, - }), - }, - - // 🟢 TIER 3 (LOW): All other pages - Evict first - { - matcher: ({ request }) => request.mode === 'navigate', - handler: new NetworkFirst({ - cacheName: 'navigation-other', - plugins: [ - new CacheableResponsePlugin({ - statuses: [0, 200], - }), - new ExpirationPlugin({ - maxEntries: 6, - maxAgeSeconds: TIME.ONE_DAY, - }), - ], - networkTimeoutSeconds: 3, - }), - }, - - // User data: Stale-while-revalidate for instant load with background refresh - // Serves cached data instantly (even if days old), updates in background - // Critical for fast app startup - user sees profile/username/balance immediately - // Fresh data always loads in background (1-2s) and updates UI when ready - // 1 week cache enables instant loads even after extended offline periods - { - matcher: ({ url }) => - isApiRequest(url) && - (url.pathname.includes('/api/user') || - url.pathname.includes('/api/profile') || - url.pathname.includes('/user/')), - handler: new StaleWhileRevalidate({ - cacheName: getCacheNameWithVersion(CACHE_NAMES.USER_API, CACHE_VERSION), - plugins: [ - new CacheableResponsePlugin({ - statuses: [200], - }), - new ExpirationPlugin({ - maxAgeSeconds: TIME.ONE_WEEK, // 1 week (instant load anytime) - maxEntries: 20, - }), - ], - }), - }, - - // Prices: Stale-while-revalidate - // Serves cached prices instantly while updating in background - // Ideal for frequently changing data where slight staleness is acceptable - { - matcher: ({ url }) => - isApiRequest(url) && - (url.pathname.includes('/manteca/prices') || - url.pathname.includes('/token-price') || - url.pathname.includes('/fiat-prices')), - handler: new StaleWhileRevalidate({ - cacheName: getCacheNameWithVersion(CACHE_NAMES.PRICES, CACHE_VERSION), - plugins: [ - new CacheableResponsePlugin({ - statuses: [200], - }), - new ExpirationPlugin({ - maxAgeSeconds: 60, // 1 min - maxEntries: 50, - }), - ], - }), - }, - - // Transaction history: Stale-while-revalidate for instant load - // Serves cached history instantly (even if days old), updates in background - // History is append-only, so showing cached data first is always safe - // Fresh transactions always load in background (1-2s) and appear when ready - // 1 week cache enables instant activity view even after extended offline periods - { - matcher: ({ url }) => - isApiRequest(url) && - (url.pathname.includes('/api/transactions') || - url.pathname.includes('/manteca/transactions') || - url.pathname.includes('/history')), - handler: new StaleWhileRevalidate({ - cacheName: getCacheNameWithVersion(CACHE_NAMES.TRANSACTIONS, CACHE_VERSION), - plugins: [ - new CacheableResponsePlugin({ - statuses: [200], - }), - new ExpirationPlugin({ - maxAgeSeconds: TIME.ONE_WEEK, // 1 week (instant load anytime) - maxEntries: 30, // iOS quota: Limit history cache size - }), - ], - }), - }, - - // Points & Invites: Stale-while-revalidate for offline points viewing - // Users want to see their points/invites offline (read-only data) - // Low change frequency - perfect for 1 week cache - // iOS quota-friendly: Small entries, rarely accessed - { - matcher: ({ url }) => - isApiRequest(url) && - (url.pathname.includes('/api/invites') || - url.pathname.includes('/api/points') || - url.pathname.includes('/tier')), - handler: new StaleWhileRevalidate({ - cacheName: getCacheNameWithVersion(CACHE_NAMES.USER_API, CACHE_VERSION), - plugins: [ - new CacheableResponsePlugin({ - statuses: [200], - }), - new ExpirationPlugin({ - maxAgeSeconds: TIME.ONE_WEEK, // 1 week (rarely changes) - maxEntries: 10, // iOS quota: Small cache for points data - }), - ], - }), - }, - - // KYC/Merchant data: Network-first with 5s timeout - // Note: /manteca/qr-payment/init is intentionally excluded - it creates payment locks - // and must always fetch fresh data to prevent duplicate locks or wrong merchant payments - { - matcher: ({ url }) => - isApiRequest(url) && (url.pathname.includes('/kyc') || url.pathname.includes('/merchant')), - handler: new NetworkFirst({ - cacheName: getCacheNameWithVersion(CACHE_NAMES.KYC_MERCHANT, CACHE_VERSION), - networkTimeoutSeconds: 5, - plugins: [ - new CacheableResponsePlugin({ - statuses: [200], - }), - new ExpirationPlugin({ - maxAgeSeconds: TIME.FIVE_MINUTES, // 5 min - maxEntries: 20, - }), - ], - }), - }, - - // External images: Cache-first - // Serves from cache immediately, never needs background update - // Images are immutable - if URL changes, it's a different image - // - // ⚠️ iOS Quota Challenge: Images vary greatly in size (5KB flags vs 500KB profile pics) - // - Ideal: maxSizeBytes limit (not supported by Serwist) - // - Reality: Conservative maxEntries (30) + time-based safety net (30 days) - // - 30 images × 200KB avg = ~6MB (safe for iOS 50MB quota) - // - Worst case: 30 × 500KB = 15MB (still safe, leaves 35MB for other caches) - { - matcher: ({ url }) => - url.origin === 'https://flagcdn.com' || - url.origin === 'https://cdn.peanut.to' || - url.origin === 'https://cdn.peanut.me' || - (url.pathname.match(/\.(png|jpg|jpeg|svg|webp|gif)$/) && url.origin !== self.location.origin), - handler: new CacheFirst({ - cacheName: getCacheNameWithVersion(CACHE_NAMES.EXTERNAL_RESOURCES, CACHE_VERSION), - plugins: [ - new CacheableResponsePlugin({ - statuses: [0, 200], - }), - new ExpirationPlugin({ - maxEntries: 100, - maxAgeSeconds: TIME.THIRTY_DAYS, // Safety net: Clean up very old images - }), - ], - }), - }, - - // ⚠️ NOTE: RPC POST request caching is NOT supported by Cache Storage API - // See: https://w3c.github.io/ServiceWorker/#cache-put (point 4) - // - // Blockchain RPC calls (balanceOf, eth_call) use POST method and cannot be cached - // by Service Workers. Alternative solutions: - // - Option 1: Server-side proxy to convert POST→GET (enables SW caching) - // - Option 2: Custom IndexedDB caching (complex, ~100 lines of code) - // - Option 3: TanStack Query in-memory cache only (current approach) - // - // Current: Relying on TanStack Query's in-memory cache (30s staleTime) - // Future: Consider implementing server-side proxy for true offline balance display - ], }) self.addEventListener('push', (event) => { @@ -405,9 +31,9 @@ self.addEventListener('push', (event) => { self.registration.showNotification(data.title, { body: data.message, tag: 'notification', - vibrate: [100, 50, 100], // Mobile notification vibration pattern - icon: '/icons/icon-192x192-beta.png', - } as NotificationOptions) + vibrate: [100, 50, 100], + icon: '/icons/icon-192x192.png', + }) ) }) @@ -429,187 +55,4 @@ self.addEventListener('notificationclick', (event) => { ) }) -// Cache cleanup on service worker activation -// Removes old cache versions when SW updates to prevent storage bloat -self.addEventListener('activate', (event) => { - console.log('[SW] ⚡ Activating (version:', CACHE_VERSION + ')') - event.waitUntil( - (async () => { - try { - // CRITICAL: Claim all clients immediately so SW controls all open pages - await self.clients.claim() - - const cacheNames = await caches.keys() - const currentCaches = [ - getCacheNameWithVersion(CACHE_NAMES.USER_API, CACHE_VERSION), - getCacheNameWithVersion(CACHE_NAMES.PRICES, CACHE_VERSION), - getCacheNameWithVersion(CACHE_NAMES.TRANSACTIONS, CACHE_VERSION), - getCacheNameWithVersion(CACHE_NAMES.KYC_MERCHANT, CACHE_VERSION), - getCacheNameWithVersion(CACHE_NAMES.EXTERNAL_RESOURCES, CACHE_VERSION), - 'navigation-home', - 'navigation-important', - 'navigation-other', - ] - - // Delete old cache versions (not current caches, not precache) - const oldCaches = cacheNames.filter( - (name) => !currentCaches.includes(name) && !name.startsWith('serwist-precache') - ) - - if (oldCaches.length > 0) { - console.log('[SW] 🗑️ Cleaning up', oldCaches.length, 'old cache(s)') - await Promise.all(oldCaches.map((name) => caches.delete(name))) - } - - console.log('[SW] ✅ Activated') - } catch (error) { - console.error('Cache cleanup failed:', error) - - // Handle quota exceeded error (can occur on any platform when storage is full) - // ⚠️ iOS CRITICAL: Smart eviction preserves critical data - // Clear caches in priority order: LOW → MEDIUM → HIGH → (never CRITICAL) - if (error instanceof Error && error.name === 'QuotaExceededError') { - console.error('⚠️ Quota exceeded - starting tiered cache eviction') - const allCaches = await caches.keys() - - // Priority 1: Clear LOW priority caches (least important) - const lowPriority = ['navigation-other', CACHE_NAMES.EXTERNAL_RESOURCES] - let cleared = await Promise.all( - allCaches - .filter((name) => lowPriority.some((pattern) => name.includes(pattern) || name === pattern)) - .map((name) => { - console.log(' [LOW] Clearing:', name) - return caches.delete(name) - }) - ) - - // Priority 2: Clear MEDIUM priority if still needed (important but not critical) - // Check if still out of space after clearing LOW priority caches - try { - const estimate = await navigator.storage.estimate() - const usageRatio = estimate.usage && estimate.quota ? estimate.usage / estimate.quota : 0 - - // If still using >85% of quota, clear MEDIUM priority - if (usageRatio > 0.85) { - const mediumPriority = ['navigation-important', CACHE_NAMES.PRICES] - cleared = await Promise.all( - allCaches - .filter((name) => - mediumPriority.some((pattern) => name.includes(pattern) || name === pattern) - ) - .map((name) => { - console.log(' [MEDIUM] Clearing:', name) - return caches.delete(name) - }) - ) - console.log(` Storage: ${(usageRatio * 100).toFixed(1)}% full after LOW eviction`) - } - } catch (e) { - // Fallback to original logic if storage.estimate() fails - console.warn('storage.estimate() failed, using fallback eviction') - if (cleared.length < 5) { - const mediumPriority = ['navigation-important', CACHE_NAMES.PRICES] - cleared = await Promise.all( - allCaches - .filter((name) => - mediumPriority.some((pattern) => name.includes(pattern) || name === pattern) - ) - .map((name) => { - console.log(' [MEDIUM] Clearing:', name) - return caches.delete(name) - }) - ) - } - } - - // Priority 3: Reduce transaction history size (keep last 10 entries) - // This is better than deleting entirely - preserves some history - try { - const txCacheName = allCaches.find((name) => name.includes(CACHE_NAMES.TRANSACTIONS)) - if (txCacheName) { - const cache = await caches.open(txCacheName) - const requests = await cache.keys() - if (requests.length > 10) { - // Keep newest 10, delete the rest - const toDelete = requests.slice(0, requests.length - 10) - await Promise.all(toDelete.map((req) => cache.delete(req))) - console.log(` [HIGH] Reduced transactions: ${requests.length} → 10 entries`) - } - } - } catch (e) { - console.error('Failed to reduce transaction cache:', e) - } - - // ✅ NEVER CLEARED (protected): - // - User API (profile, username) - // - navigation-home (/home page) - // - Precache (app shell) - // - Last 10 transaction history entries - - console.log('✅ Tiered eviction complete. Critical data preserved.') - } - } - })() - ) -}) - -// Message handler for client communication -// Handles SW control messages and cache statistics queries -self.addEventListener('message', (event) => { - // Skip waiting: Immediately activate new SW version - if (event.data && event.data.type === 'SKIP_WAITING') { - self.skipWaiting() - } - - // Android back button: Navigate back in PWA - if (event.data && event.data.type === 'NAVIGATE_BACK') { - event.waitUntil( - self.clients.matchAll({ type: 'window' }).then((clients) => { - clients.forEach((client) => { - client.postMessage({ type: 'NAVIGATE_BACK' }) - }) - }) - ) - } - - // Cache statistics: Returns cache sizes and storage estimates - // Requires MessageChannel for response (ports[0] must exist) - if (event.data && event.data.type === 'GET_CACHE_STATS') { - if (!event.ports || !event.ports[0]) { - console.error('GET_CACHE_STATS requires MessageChannel but none provided') - return - } - - event.waitUntil( - (async () => { - try { - const cacheNames = await caches.keys() - const stats: { [key: string]: number } = {} - - for (const name of cacheNames) { - const cache = await caches.open(name) - const keys = await cache.keys() - stats[name] = keys.length - } - - // Also get storage estimate if available - let storageEstimate: StorageEstimate | null = null - if ('storage' in navigator && 'estimate' in navigator.storage) { - storageEstimate = await navigator.storage.estimate() - } - - event.ports[0].postMessage({ - cacheStats: stats, - storageEstimate, - }) - } catch (error) { - console.error('Failed to get cache stats:', error) - event.ports[0].postMessage({ error: 'Failed to get cache stats' }) - } - })() - ) - } -}) - serwist.addEventListeners() -console.log('[SW] ✅ Service Worker initialized') diff --git a/src/components/Global/OfflineScreen/index.tsx b/src/components/Global/OfflineScreen/index.tsx new file mode 100644 index 000000000..6efbc5a10 --- /dev/null +++ b/src/components/Global/OfflineScreen/index.tsx @@ -0,0 +1,161 @@ +'use client' + +import { Button } from '@/components/0_Bruddle' + +// inline peanut icon svg to ensure it works offline without needing to fetch external assets +const PeanutIcon = ({ className }: { className?: string }) => ( + + {/* */} + + + {/* */} + + + {/* */} + + + {/* */} + + + {/* */} + + + {/* */} + + + {/* */} + + + {/* */} + + + + + + + + + + {/* */} + + + + {/* */} + + + + + +) + +/** + * full-page offline screen shown when user loses internet connection + * displays peanut logo and helpful message about pwa cached content + * when connection is restored, page automatically reloads + */ +export default function OfflineScreen() { + // check if connection is restored before reloading + const handleRetryConnection = () => { + if (navigator.onLine) { + // connection restored, reload the page + window.location.reload() + } else { + // still offline, automatic polling will detect when back online + console.log('Still offline, waiting for connection...') + } + } + + return ( +
+
+ +
+
+

You're Offline

+

+ No internet connection detected. Please check your network settings and try again. +

+
+ +
+ ) +} diff --git a/src/hooks/useNetworkStatus.ts b/src/hooks/useNetworkStatus.ts index 32c90c56a..74ffdfb29 100644 --- a/src/hooks/useNetworkStatus.ts +++ b/src/hooks/useNetworkStatus.ts @@ -7,22 +7,28 @@ import { useEffect, useState } from 'react' * captive portals, VPN/firewall issues). Use as UI hint only. TanStack Query's network * detection tests actual connectivity and is more reliable for request retries. * + * 🔄 AUTO-RELOAD: When connection is restored, page automatically reloads to fetch fresh data + * * @returns isOnline - Current connection status per navigator.onLine - * @returns wasOffline - True for 3s after coming back online (useful for "restored" toast) + * @returns wasOffline - Deprecated (kept for backward compatibility, always false) + * @returns isInitialized - True after component has mounted (prevents showing offline screen on initial load) */ export function useNetworkStatus() { const [isOnline, setIsOnline] = useState(() => typeof navigator !== 'undefined' ? navigator.onLine : true ) const [wasOffline, setWasOffline] = useState(false) + const [isInitialized, setIsInitialized] = useState(false) useEffect(() => { let timeoutId: ReturnType | null = null + let pollIntervalId: ReturnType | null = null const handleOnline = () => { setIsOnline(true) - setWasOffline(true) - timeoutId = setTimeout(() => setWasOffline(false), 3000) + // reload immediately when connection is restored to get fresh content + // skip the "back online" screen for faster/cleaner ux + window.location.reload() } const handleOffline = () => { @@ -34,17 +40,53 @@ export function useNetworkStatus() { } } + // check current status after mount and mark as initialized + const checkOnlineStatus = () => { + const currentStatus = navigator.onLine + if (currentStatus !== isOnline) { + if (currentStatus) { + handleOnline() + } else { + handleOffline() + } + } + } + + // initial check and mark as initialized after short delay + // this ensures we catch the actual status after mount + setTimeout(() => { + checkOnlineStatus() + setIsInitialized(true) + }, 100) + + // poll every 2 seconds to catch DevTools offline toggle + // necessary because online/offline events don't always fire reliably in DevTools + pollIntervalId = setInterval(checkOnlineStatus, 2000) + + // listen to standard events (works in production/real network changes) window.addEventListener('online', handleOnline) window.addEventListener('offline', handleOffline) + // also check on visibility change (user returns to tab) + const handleVisibilityChange = () => { + if (!document.hidden) { + checkOnlineStatus() + } + } + document.addEventListener('visibilitychange', handleVisibilityChange) + return () => { window.removeEventListener('online', handleOnline) window.removeEventListener('offline', handleOffline) + document.removeEventListener('visibilitychange', handleVisibilityChange) if (timeoutId) { clearTimeout(timeoutId) } + if (pollIntervalId) { + clearInterval(pollIntervalId) + } } - }, []) + }, [isOnline]) - return { isOnline, wasOffline } + return { isOnline, wasOffline, isInitialized } } From 1597241280f1c8713ea07fd82ea5700cf29227e1 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Sat, 15 Nov 2025 17:20:33 -0300 Subject: [PATCH 120/121] refactor: clean up PointsCard component by removing unused imports and updating CardProps ref type --- src/components/Common/PointsCard.tsx | 3 --- src/components/Global/Card/index.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Common/PointsCard.tsx b/src/components/Common/PointsCard.tsx index a6da207a1..5a39115cd 100644 --- a/src/components/Common/PointsCard.tsx +++ b/src/components/Common/PointsCard.tsx @@ -1,6 +1,3 @@ -import Image from 'next/image' - -import { STAR_STRAIGHT_ICON } from '@/assets' import Card from '../Global/Card' import InvitesIcon from '../Home/InvitesIcon' diff --git a/src/components/Global/Card/index.tsx b/src/components/Global/Card/index.tsx index c9a26fc3d..869cd6ee4 100644 --- a/src/components/Global/Card/index.tsx +++ b/src/components/Global/Card/index.tsx @@ -9,7 +9,7 @@ interface CardProps { className?: string onClick?: () => void border?: boolean - ref?: React.RefObject + ref?: React.Ref } export function getCardPosition(index: number, totalItems: number): CardPosition { From d922e67156a6caa2910e415ede25ee23eafcfc00 Mon Sep 17 00:00:00 2001 From: Hugo Montenegro Date: Sat, 15 Nov 2025 19:26:05 -0300 Subject: [PATCH 121/121] simplefi amount fix --- src/app/(mobile-ui)/qr-pay/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index 252e01291..02d8d2b9b 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -423,7 +423,7 @@ export default function QRPayPage() { } setSimpleFiPayment(response) - setAmount(response.currencyAmount) + setAmount(response.usdAmount) setCurrencyAmount(response.currencyAmount) setCurrency({ code: 'ARS',