{error &&
+
+ {address && (
+
+
+ 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)
+ }}
+ />
+
+ }
+ />
+ )}
+ You MUST:
+
-
- )
+ return
-
-
-
-
-
- Waiting for the merchant to set the amount
-- 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
@@ -1120,7 +1217,7 @@ export default function QRPayPage() {
{/* Perk Eligibility Card - Show before claiming */}
{qrPayment?.perk?.eligible && !perkClaimed && !qrPayment.perk.claimed && (
-
+
= ({ 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 +38,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(() => {
@@ -65,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)
}
@@ -114,6 +116,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/components/AddMoney/components/MantecaDepositShareDetails.tsx b/src/components/AddMoney/components/MantecaDepositShareDetails.tsx
index 12fe80c3c..da429fdcf 100644
--- a/src/components/AddMoney/components/MantecaDepositShareDetails.tsx
+++ b/src/components/AddMoney/components/MantecaDepositShareDetails.tsx
@@ -2,7 +2,7 @@
import NavHeader from '@/components/Global/NavHeader'
import { useParams, useRouter } from 'next/navigation'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
import { countryData } from '@/components/AddMoney/consts'
import ShareButton from '@/components/Global/ShareButton'
import { type MantecaDepositResponseData } from '@/types/manteca.types'
@@ -21,10 +21,12 @@ const MantecaDepositShareDetails = ({
depositDetails,
source,
currencyAmount,
+ onBack,
}: {
depositDetails: MantecaDepositResponseData
source: 'bank' | 'regionalMethod'
currencyAmount?: string | undefined
+ onBack?: () => void
}) => {
const router = useRouter()
const params = useParams()
@@ -84,7 +86,7 @@ const MantecaDepositShareDetails = ({
return (
-
+ {!qrPayment?.perk?.eligible && pointsData?.estimatedPoints && (
+ - You've earned {pointsData.estimatedPoints}{' '} - {pointsData.estimatedPoints === 1 ? 'point' : 'points'}! -
-
@@ -1454,3 +1545,26 @@ export default function QRPayPage() {
)
}
+
+export const QrPayPageLoading = ({ message }: { message: string }) => {
+ return (
+
+
+ )
+}
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 ac78f33d5..05c811a31 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 })
@@ -282,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
}
@@ -300,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
@@ -431,7 +455,7 @@ export default function MantecaWithdrawFlow() {
walletBalance={
balance ? formatAmount(formatUnits(balance, PEANUT_WALLET_TOKEN_DECIMALS)) : undefined
}
- isInitialInputUsd={swapCurrency !== 'true'}
+ isInitialInputUsd={isInitialInputUsd}
/>
+
+
+
+
+
+ {message}
+
- router.back()} />
+ router.back())} />
{/* Amount Display Card */}
diff --git a/src/components/AddMoney/components/OnrampConfirmationModal.tsx b/src/components/AddMoney/components/OnrampConfirmationModal.tsx
index bef577fbd..d14b4f724 100644
--- a/src/components/AddMoney/components/OnrampConfirmationModal.tsx
+++ b/src/components/AddMoney/components/OnrampConfirmationModal.tsx
@@ -34,6 +34,7 @@ export const OnrampConfirmationModal = ({
}
content={
setShowMinAmountError(false)}
- title="Minimum Amount "
- description={'The minimum amount for a bank transaction 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"
preventClose={false}
modalPanelClassName="max-w-md mx-8"
/>
+
{
+ daimoButtonClickRef.current?.()
+ }, 0)
+ } else {
+ // for other methods, use handleMethodClick
+ handleMethodClick(selectedPaymentMethod, true) // true = bypass modal check
+ }
}
setSelectedPaymentMethod(null)
},
@@ -450,10 +467,12 @@ export const MethodCard = ({
method,
onClick,
requiresVerification,
+ isDisabled,
}: {
method: PaymentMethod
onClick: () => void
requiresVerification?: boolean
+ isDisabled?: boolean
}) => {
return (
}
onClick={onClick}
- isDisabled={method.soon}
+ isDisabled={method.soon || isDisabled}
rightContent={
+ isDisabled?: boolean
+ clickHandlerRef?: React.MutableRefObject<(() => void) | null>
}
const ActionListDaimoPayButton = ({
handleContinueWithPeanut,
showConfirmModal,
onBeforeShow,
+ isDisabled,
+ clickHandlerRef,
}: ActionListDaimoPayButtonProps) => {
const dispatch = useAppDispatch()
const searchParams = useSearchParams()
@@ -110,10 +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,
- destinationchainId: daimoPaymentResponse.payment.destination.chainId,
+ destinationchainId: destinationChainId,
payerAddress: peanutWalletAddress ?? daimoPaymentResponse.payment.source.payerAddress,
sourceChainId: daimoPaymentResponse.payment.source.chainId,
sourceTokenAddress: daimoPaymentResponse.payment.source.tokenAddress,
@@ -146,6 +158,8 @@ const ActionListDaimoPayButton = ({
{
// First check if parent wants to intercept (e.g. show balance modal)
@@ -176,10 +190,14 @@ 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 (
}) => {
+ return (
+
+
+ )
+}
+
+export default PointsCard
diff --git a/src/components/Global/Card/index.tsx b/src/components/Global/Card/index.tsx
index f369e1c18..869cd6ee4 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.Ref
}
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 (
+ = {
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/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/Common/ActionList.tsx b/src/components/Common/ActionList.tsx
index f5d902f49..c1de9f64a 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, useRef } from 'react'
import ActionModal from '@/components/Global/ActionModal'
import Divider from '../0_Bruddle/Divider'
import { Button } from '../0_Bruddle'
@@ -15,7 +15,7 @@ import { useRouter } from 'next/navigation'
import { PEANUTMAN_LOGO } from '@/assets/peanut'
import { BankClaimType, useDetermineBankClaimType } from '@/hooks/useDetermineBankClaimType'
import useSavedAccounts from '@/hooks/useSavedAccounts'
-import { RequestFulfillmentBankFlowStep, useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext'
+import { useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext'
import { type ParsedURL } from '@/lib/url-parser/types/payment'
import { useAppDispatch, usePaymentStore } from '@/redux/hooks'
import { BankRequestType, useDetermineBankRequestType } from '@/hooks/useDetermineBankRequestType'
@@ -36,6 +36,8 @@ import { tokenSelectorContext } from '@/context'
import SupportCTA from '../Global/SupportCTA'
import { DEVCONNECT_LOGO } from '@/assets'
import useKycStatus from '@/hooks/useKycStatus'
+import { usePaymentInitiator } from '@/hooks/usePaymentInitiator'
+import { MIN_BANK_TRANSFER_AMOUNT, validateMinimumAmount } from '@/constants'
const SHOW_INVITE_MODAL_FOR_DEVCONNECT = false
@@ -47,6 +49,7 @@ interface IActionListProps {
isInviteLink?: boolean
showDevconnectMethod?: boolean
setExternalWalletRecipient?: (recipient: { name: string | undefined; address: string }) => void
+ usdAmount?: string
}
/**
@@ -65,6 +68,7 @@ export default function ActionList({
isInviteLink = false,
showDevconnectMethod,
setExternalWalletRecipient,
+ usdAmount: usdAmountValue,
}: IActionListProps) {
const router = useRouter()
const {
@@ -78,15 +82,13 @@ 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,
- setShowExternalWalletFulfillMethods,
setFlowStep: setRequestFulfilmentBankFlowStep,
setFulfillUsingManteca,
setRegionalMethodType: setRequestFulfillmentRegionalMethodType,
@@ -106,7 +108,11 @@ export default function ActionList({
const [isUsePeanutBalanceModalShown, setIsUsePeanutBalanceModalShown] = useState(false)
const [showUsePeanutBalanceModal, setShowUsePeanutBalanceModal] = useState(false)
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null)
+ 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()
@@ -120,18 +126,15 @@ 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.filter((method) => method.id !== 'devconnect') //TODO @dev remove this after devconnect app testing phase
+ ? DEVCONNECT_CLAIM_METHODS.filter((method) => method.id !== 'devconnect')
: undefined,
})
@@ -139,7 +142,24 @@ 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) &&
+ !validateMinimumAmount(requestAmountValue, method.id)
+ ) {
+ 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) {
@@ -151,7 +171,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
}
@@ -196,40 +216,21 @@ export default function ActionList({
break
}
} 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
- }
-
+ // for bank/mercadopago/pix in request flow, redirect to add-money flow
switch (method.id) {
case 'bank':
- if (requestType === BankRequestType.GuestKycNeeded) {
- addParamStep('bank')
- setIsGuestVerificationModalOpen(true)
- } else {
- setShowRequestFulfilmentBankFlowManager(true)
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.BankCountryList)
- }
- break
case 'mercadopago':
case 'pix':
- if (!user) {
- addParamStep('regional-req-fulfill')
- setIsGuestVerificationModalOpen(true)
- return
+ if (user?.user) {
+ // user is logged in, redirect to add-money
+ router.push('/add-money')
+ } else {
+ // user is not logged in, save redirect url and go to setup
+ const redirectUri = encodeURIComponent('/add-money')
+ router.push(`/setup?redirect_uri=${redirectUri}`)
}
- setRequestFulfillmentRegionalMethodType(method.id)
- setFulfillUsingManteca(true)
- break
- case 'exchange-or-wallet':
- setShowExternalWalletFulfillMethods(true)
break
+ // 'exchange-or-wallet' case removed - handled by ActionListDaimoPayButton
}
}
}
@@ -333,6 +334,8 @@ export default function ActionList({
}
return true // Proceed with Daimo
}}
+ isDisabled={!isAmountEntered}
+ clickHandlerRef={daimoButtonClickRef}
/>
)
@@ -340,7 +343,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
}
@@ -356,7 +359,11 @@ export default function ActionList({
}}
key={method.id}
method={method}
- requiresVerification={methodRequiresVerification}
+ requiresVerification={
+ methodRequiresVerification ||
+ (['mercadopago', 'pix'].includes(method.id) && !isUserMantecaKycApproved)
+ }
+ isDisabled={!isAmountEntered}
/>
)
})}
@@ -365,14 +372,15 @@ export default function ActionList({
In the next step you'll see:
You MUST:
+ You've earned {points} {points === 1 ? 'point' : 'points'}! +
+
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}
diff --git a/src/components/Global/DirectSendQR/index.tsx b/src/components/Global/DirectSendQR/index.tsx
index 609b25141..cfc853ad8 100644
--- a/src/components/Global/DirectSendQR/index.tsx
+++ b/src/components/Global/DirectSendQR/index.tsx
@@ -5,6 +5,9 @@ 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 PeanutLoading from '@/components/Global/PeanutLoading'
+// 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'
@@ -438,7 +441,7 @@ export default function DirectSendQr({
shadowSize="4"
shadowType="primary"
className={twMerge(
- 'mx-auto h-20 w-20 cursor-pointer justify-center rounded-full p-4 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}
@@ -499,12 +502,15 @@ export default function DirectSendQr({
{isQRScannerOpen && (
<>
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 */}
-
+
+
{
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 18ad57733..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,14 +45,22 @@ const InfoCard = ({
itemIcon,
itemIconSize = 16,
itemIconClassName,
+ containerClassName,
}: InfoCardProps) => {
const variantClasses = VARIANT_CLASSES[variant]
const hasContent = title || description || items
return (
-
- {icon &&
+ {icon && (
+
{title && {title}}
{description && (
diff --git a/src/components/Global/LazyLoadErrorBoundary/index.tsx b/src/components/Global/LazyLoadErrorBoundary/index.tsx
new file mode 100644
index 000000000..5f98fe41e
--- /dev/null
+++ b/src/components/Global/LazyLoadErrorBoundary/index.tsx
@@ -0,0 +1,45 @@
+'use client'
+import React from 'react'
+
+interface LazyLoadErrorBoundaryProps {
+ children: React.ReactNode
+ fallback?: React.ReactNode
+ onError?: (error: Error) => 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/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/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 (
+
+
+ )
+}
diff --git a/src/components/Global/PeanutFactsLoading/index.tsx b/src/components/Global/PeanutFactsLoading/index.tsx
new file mode 100644
index 000000000..70fc7c894
--- /dev/null
+++ b/src/components/Global/PeanutFactsLoading/index.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { useState } from 'react'
+import Image from 'next/image'
+import { PeanutGuyGIF } from '@/assets/illustrations'
+import Card from '../Card'
+import PeanutLoading from '../PeanutLoading'
+
+const PEANUT_FACTS = [
+ "Peanuts aren't nuts—they're legumes! They're basically fancy beans pretending to be nuts.",
+ 'It takes about 540 peanuts to make a 12-ounce jar of peanut butter.',
+ 'Peanuts grow underground, making them the introverts of the nut world.',
+ "Astronauts eat peanuts in space because they're the perfect protein-packed snack.",
+ "The world's largest peanut was 4 inches long. An absolute unit.",
+ 'Peanuts are one of the ingredients in dynamite (through the oil—glycerol).',
+ 'A peanut plant produces about 40 peanuts per plant. Efficient little guys.',
+ 'Arachibutyrophobia is the fear of peanut butter sticking to the roof of your mouth. Yes, really.',
+ 'Peanuts can be used to make everything from soap to shaving cream. Versatile kings.',
+ "China and India produce over 60% of the world's peanuts. Peanut powerhouses!",
+ 'Peanut butter was invented as a protein substitute for people with bad teeth.',
+ 'The peanut shell is actually a pod, just like peas. Legume logic.',
+ 'Two-thirds of all peanuts grown are used to make peanut butter and peanut snacks.',
+ 'Peanuts are a great source of protein—about 7 grams per ounce.',
+ 'Wild peanuts still grow in South America, where they originally came from.',
+ 'Boiled peanuts are a popular snack in many countries. Soft, salty, and delicious.',
+ 'Peanuts can improve soil quality by adding nitrogen. Environmental heroes!',
+]
+
+interface PeanutFactsLoadingProps {
+ message?: string
+}
+
+export default function PeanutFactsLoading({ message = 'Processing...' }: PeanutFactsLoadingProps) {
+ // pick a random fact once when component mounts
+ const [currentFactIndex] = useState(() => Math.floor(Math.random() * PEANUT_FACTS.length))
+
+ return (
+
+
+
+
+
+ You're Offline
++ No internet connection detected. Please check your network settings and try again. +
+
+
+ )
+}
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 (
-
+
+
+
+ {/* Peanutman with beer character at the top */}
+
+ Did you know?
++ {PEANUT_FACTS[currentFactIndex]} +
+
+
+
+
+
+
+
+
+
+ {message}
+
-
- 
- Loading...
+ (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/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx
index 341de9c62..314de37e3 100644
--- a/src/components/Global/TokenAmountInput/index.tsx
+++ b/src/components/Global/TokenAmountInput/index.tsx
@@ -300,7 +300,7 @@ const TokenAmountInput = ({
+
)
}
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
+
+
+
+ {message ?? 'Loading...'}
+
{message}
{activeSnapPoint === snapPoints[0] ? collapsedTitle : expandedTitle}
diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx
index 341de9c62..314de37e3 100644
--- a/src/components/Global/TokenAmountInput/index.tsx
+++ b/src/components/Global/TokenAmountInput/index.tsx
@@ -300,7 +300,7 @@ const TokenAmountInput = ({
{
let value = e.target.value
@@ -346,7 +346,9 @@ const TokenAmountInput = ({
≈{' '}
{displayMode === 'TOKEN'
? alternativeDisplayValue
- : formatCurrency(alternativeDisplayValue.replace(',', ''))}{' '}
+ : alternativeDisplayValue
+ ? formatCurrency(alternativeDisplayValue.replace(',', ''))
+ : '0.00'}{' '}
{alternativeDisplaySymbol}
)}
diff --git a/src/components/Global/WalletNavigation/index.tsx b/src/components/Global/WalletNavigation/index.tsx
index 0e4555897..a509bb0f6 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'
import { useHaptic } from 'use-haptic'
type NavPathProps = {
@@ -33,32 +34,35 @@ type NavSectionProps = {
pathName: string
}
-const NavSection: React.FC = ({ paths, pathName }) => (
- <>
- {paths.map(({ name, href, icon, size }, index) => (
-
- {
- if (pathName === href) {
- window.location.reload()
- }
- }}
- >
- = ({ paths, pathName }) => {
+ const router = useRouter()
+ return (
+ <>
+ {paths.map(({ name, href, icon, size }, index) => (
+
+ {
+ if (pathName === href) {
+ router.refresh()
+ }
+ }}
+ >
+ = {
+ 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,71 @@ 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 invite validation is still loading, don't show content yet
+ if (isLoading) {
+ setShouldShowContent(false)
+ return
+ }
+
+ // 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, 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
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 +135,10 @@ function InvitePageContent() {
}
}
- if (isLoading || isFetchingUser) {
+ // show loading if:
+ // 1. badge is being awarded
+ // 2. we determined content shouldn't be shown yet (covers user fetching + invite validation)
+ if (isAwardingBadge || !shouldShowContent) {
return {
setFulfillUsingManteca(false)
}
+ const handleBackClick = () => {
+ // reset manteca fulfillment state to show payment options again
+ setFulfillUsingManteca(false)
+ setSelectedCountry(null)
+ }
+
useEffect(() => {
if (!isUserMantecaKycApproved) {
setIsKYCModalOpen(true)
@@ -74,7 +80,13 @@ const MantecaFulfillment = () => {
return (
- {depositData?.data &&
- You've earned {points} {points === 1 ? 'point' : 'points'}!
-
-
- )}
+ {points && {description}
}
+ {countries.length === 0 && (
+ = ({
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)
+ if (navigator.share) {
+ navigator
+ .share({
+ url: profileUrl,
+ })
+ .catch((error) => {
+ console.error('Error sharing:', error)
+ })
+ } else {
+ navigator.clipboard.writeText(profileUrl)
+ }
}}
>
{profileUrl.replace('https://', '')}
@@ -76,24 +81,6 @@ const ProfileHeader: React.FC = ({
)}
- {isDrawerOpen && (
- <>
-
-
-
- Your Peanut profile is public
- Share it to receive payments!
-
-
-
- Share Profile link
-
-
-
-
- )}
)
}
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 (
)
}
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) && (
- {
- if (pathName === href) {
- window.location.reload()
- }
- }}
- >
-
- ))}
-
-)
+const NavSection: React.FC
+ {
+ if (pathName === href) {
+ router.refresh()
+ }
+ }}
+ >
+
+ ))}
+
+ )
+}
type MobileNavProps = {
pathName: string
diff --git a/src/components/Invites/InvitesPage.tsx b/src/components/Invites/InvitesPage.tsx
index f58454251..08f56ff26 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
- {!isPeanutWalletUSDC && !selectedTokenAddress && !selectedChainID && (
-
- )} */}
-
- {/* {isExternalWalletConnected && isAddMoneyFlow && (
- Select token and chain to receive
- )}
-
- Use USDC on Arbitrum for free transactions!
-
- )}
-
+
+ )}
{isDirectUsdPayment && (
+ Use USDC on Arbitrum for free transactions!
+
+ )}
+
- {depositData?.data &&
- {points && (
-
-
- )}
+ {points && - You've earned {points} {points === 1 ? 'point' : '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 &&
+ {countries.length === 0 && (
+ = ({
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)
+ if (navigator.share) {
+ navigator
+ .share({
+ url: profileUrl,
+ })
+ .catch((error) => {
+ console.error('Error sharing:', error)
+ })
+ } else {
+ navigator.clipboard.writeText(profileUrl)
+ }
}}
>
= ({
)}
- {isDrawerOpen && (
- <>
- {description}
}{profileUrl.replace('https://', '')}
@@ -76,24 +81,6 @@ const ProfileHeader: React.FC