{children}
+
+
+
+
-
-
-
+
Developer Tools
-- Internal testing tools and components. Publicly accessible for multi-device testing. -
-
+
+
+
+
+ )}
+
{/* Referral Campaign Modal - DISABLED FOR NOW */}
{/* {
const pathName = usePathname()
// Allow access to public paths without authentication
- const isPublicPath = PUBLIC_ROUTES_REGEX.test(pathName)
+ // Dev test pages (gift-test, shake-test) are only public in dev mode
+ const isPublicPath = isPublicRoute(pathName, IS_DEV)
- const { isFetchingUser, user } = useAuth()
+ const { isFetchingUser, user, userFetchError } = useAuth()
const [isReady, setIsReady] = useState(false)
const isUserLoggedIn = !!user?.user.userId || false
const isHome = pathName === '/home'
const isHistory = pathName === '/history'
const isSupport = pathName === '/support'
+ const isDev = pathName?.startsWith('/dev') ?? false
const alignStart = isHome || isHistory || isSupport
const router = useRouter()
const { showIosPwaInstallScreen } = useSetupStore()
@@ -99,6 +103,12 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
return
+ Internal testing tools and components. Publicly accessible for multi-device testing. +
-
+
)
diff --git a/src/app/(mobile-ui)/dev/perk-success-test/page.tsx b/src/app/(mobile-ui)/dev/perk-success-test/page.tsx
new file mode 100644
index 000000000..0df4e22a9
--- /dev/null
+++ b/src/app/(mobile-ui)/dev/perk-success-test/page.tsx
@@ -0,0 +1,190 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Card } from '@/components/0_Bruddle/Card'
+import { Button } from '@/components/0_Bruddle/Button'
+import NavHeader from '@/components/Global/NavHeader'
+import GlobalCard from '@/components/Global/Card'
+import { Icon } from '@/components/Global/Icons/Icon'
+import { SoundPlayer } from '@/components/Global/SoundPlayer'
+import { useHaptic } from 'use-haptic'
+import { shootDoubleStarConfetti } from '@/utils/confetti'
+import { extractInviteeName } from '@/utils/general.utils'
+
+type MockPerk = {
+ id: string
+ name: string
+ amountUsd: number
+ reason: string
+}
+
+const MOCK_PERKS: MockPerk[] = [
+ {
+ id: 'mock-1',
+ name: 'Card Pioneer Inviter Reward',
+ amountUsd: 5,
+ reason: 'Alice became a Card Pioneer',
+ },
+ {
+ id: 'mock-2',
+ name: 'Card Pioneer Inviter Reward',
+ amountUsd: 5,
+ reason: 'Bob became a Card Pioneer',
+ },
+ {
+ id: 'mock-3',
+ name: 'Card Pioneer Inviter Reward',
+ amountUsd: 5,
+ reason: 'Charlie became a Card Pioneer',
+ },
+ {
+ id: 'mock-4',
+ name: 'Card Pioneer Inviter Reward',
+ amountUsd: 10,
+ reason: 'Diana became a Card Pioneer (bonus!)',
+ },
+ {
+ id: 'mock-5',
+ name: 'Card Pioneer Inviter Reward',
+ amountUsd: 5,
+ reason: 'Eve became a Card Pioneer',
+ },
+]
+
+export default function PerkSuccessTestPage() {
+ const [currentPerkIndex, setCurrentPerkIndex] = useState(0)
+ const [showSuccess, setShowSuccess] = useState(false)
+ const [canDismiss, setCanDismiss] = useState(false)
+ const [isExiting, setIsExiting] = useState(false)
+ const [playSound, setPlaySound] = useState(false)
+ const { triggerHaptic } = useHaptic()
+
+ const currentPerk = MOCK_PERKS[currentPerkIndex]
+
+ const handleShowSuccess = () => {
+ setShowSuccess(true)
+ setCanDismiss(false)
+ setIsExiting(false)
+ setPlaySound(true)
+ triggerHaptic()
+ shootDoubleStarConfetti({ origin: { x: 0.5, y: 0.4 } })
+
+ // Enable dismiss after 2 seconds
+ setTimeout(() => setCanDismiss(true), 2000)
+ }
+
+ const handleDismiss = () => {
+ if (!canDismiss) return
+
+ setIsExiting(true)
+ setTimeout(() => {
+ setShowSuccess(false)
+ setPlaySound(false)
+ // Move to next perk
+ setCurrentPerkIndex((prev) => (prev + 1) % MOCK_PERKS.length)
+ }, 400)
+ }
+
+ const inviteeName = extractInviteeName(currentPerk.reason)
+
+ return (
+
{tools.map((tool) => (
-
+
-
-
-
-
))}
{tool.icon}
+
+
-
+
-
{tool.name}
-{tool.description}
- {tool.status === 'active' && ( - - Active - - )} +{tool.name}
+{tool.description}
ℹ️ Info
--
-
- • These tools are only available in development mode -
- • Perfect for testing on multiple devices -
- • Share the URL with team members for testing +
- These tools are only available in development mode +
- Perfect for testing on multiple devices +
- Share the URL with team members for testing
+
+
+ -
+
+
+ )
+}
diff --git a/src/app/(mobile-ui)/home/page.tsx b/src/app/(mobile-ui)/home/page.tsx
index f3a542d54..e4ed39a98 100644
--- a/src/app/(mobile-ui)/home/page.tsx
+++ b/src/app/(mobile-ui)/home/page.tsx
@@ -27,12 +27,14 @@ import { useClaimBankFlow } from '@/context/ClaimBankFlowContext'
import { useDeviceType, DeviceType } from '@/hooks/useGetDeviceType'
import { useNotifications } from '@/hooks/useNotifications'
import useKycStatus from '@/hooks/useKycStatus'
+import { useCardPioneerInfo } from '@/hooks/useCardPioneerInfo'
import HomeCarouselCTA from '@/components/Home/HomeCarouselCTA'
import InvitesIcon from '@/components/Home/InvitesIcon'
import NavigationArrow from '@/components/Global/NavigationArrow'
import { updateUserById } from '@/app/actions/users'
import { useHaptic } from 'use-haptic'
import LazyLoadErrorBoundary from '@/components/Global/LazyLoadErrorBoundary'
+import underMaintenanceConfig from '@/config/underMaintenance.config'
// Lazy load heavy modal components (~20-30KB each) to reduce initial bundle size
// Components are only loaded when user triggers them
@@ -43,6 +45,7 @@ const NoMoreJailModal = lazy(() => import('@/components/Global/NoMoreJailModal')
const EarlyUserModal = lazy(() => import('@/components/Global/EarlyUserModal'))
const KycCompletedModal = lazy(() => import('@/components/Home/KycCompletedModal'))
const IosPwaInstallModal = lazy(() => import('@/components/Global/IosPwaInstallModal'))
+const CardPioneerModal = lazy(() => import('@/components/Card/CardPioneerModal'))
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
@@ -64,6 +67,11 @@ export default function Home() {
const { isFetchingUser, fetchUser } = useAuth()
const { isUserKycApproved } = useKycStatus()
+ const {
+ hasPurchased: hasCardPioneerPurchased,
+ isLoading: isCardInfoLoading,
+ error: cardInfoError,
+ } = useCardPioneerInfo()
const username = user?.user.username
const [showBalanceWarningModal, setShowBalanceWarningModal] = useState(false)
@@ -71,6 +79,13 @@ export default function Home() {
const [isPostSignupActionModalVisible, setIsPostSignupActionModalVisible] = useState(false)
const [showKycModal, setShowKycModal] = useState(user?.user.showKycCompletedModal ?? false)
+ // Track if this is a fresh signup session - captured once on mount so it persists
+ // even after NoMoreJailModal clears the sessionStorage key
+ const [isPostSignupSession] = useState(() => {
+ if (typeof window === 'undefined') return false
+ return sessionStorage.getItem('showNoMoreJailModal') === 'true'
+ })
+
// sync modal state with user data when it changes
useEffect(() => {
if (user?.user.showKycCompletedModal !== undefined) {
@@ -260,6 +275,25 @@ export default function Home() {
+ {/* Card Pioneer Modal - Show to all users who haven't purchased */}
+ {/* Eligibility check happens during the flow (geo screen), not here */}
+ {/* Only shows if no higher-priority modals are active and card info loaded successfully */}
+ {!underMaintenanceConfig.disableCardPioneers &&
+ !isCardInfoLoading &&
+ !cardInfoError &&
+ !showBalanceWarningModal &&
+ !showPermissionModal &&
+ !showKycModal &&
+ !isPostSignupActionModalVisible &&
+ !user?.showEarlyUserModal &&
+ !isPostSignupSession && (
+
+ {/* Instructions */}
+
+
+
+ {/* Current Perk Info */}
+
+
+
+ {/* Trigger Button */}
+ {!showSuccess && (
+
+ )}
+
+ {/* Success Screen Preview */}
+ {showSuccess && (
+
+ Test the perk claim success screen
+-
+
- 1. Click "Trigger Success" to show the success screen +
- 2. Wait 2 seconds before you can dismiss (debounce) +
- 3. Tap to dismiss and load next mock perk +
+ Current Mock Perk ({currentPerkIndex + 1}/{MOCK_PERKS.length}) +
+ID: {currentPerk.id}
+Amount: ${currentPerk.amountUsd}
+Reason: {currentPerk.reason}
+
+
+ )}
+
+ {/* Quick Actions */}
+ + SUCCESS SCREEN PREVIEW (tap to dismiss when ready) +
+ +
+ {playSound &&
+ {/* Check icon */}
+
+
+ {/* Tap to continue - fades in when ready */}
+
+
+
+
+ {/* Text content */}
+
+
+ You received
++${currentPerk.amountUsd}
+
+
+ Tap to continue +
+
+
+
+
+
{/* Sidebar - Fixed on desktop */}
-
router.back()} />
@@ -62,7 +74,7 @@ const InvitesPage = () => {
router.back()} />
-
-
+
{depositAddress && (
diff --git a/src/components/AddMoney/consts/index.ts b/src/components/AddMoney/consts/index.ts
index 2858c4019..b368d057e 100644
--- a/src/components/AddMoney/consts/index.ts
+++ b/src/components/AddMoney/consts/index.ts
@@ -2843,7 +2843,9 @@ export const NON_EUR_SEPA_ALPHA2 = new Set(
!!c.iso3 &&
BRIDGE_ALPHA3_TO_ALPHA2[c.iso3] &&
// exclude usa explicitly; bridge map includes it but it's not sepa
- c.iso3 !== 'USA'
+ c.iso3 !== 'USA' &&
+ // exclude uk explicitly; uses faster payments, not sepa
+ c.iso3 !== 'GBR'
)
.map((c) => ({ alpha2: BRIDGE_ALPHA3_TO_ALPHA2[c.iso3!], currency: c.currency }))
.filter((x) => x.alpha2 && x.currency && x.currency !== 'EUR')
diff --git a/src/components/AddWithdraw/AddWithdrawRouterView.tsx b/src/components/AddWithdraw/AddWithdrawRouterView.tsx
index 649ebba9b..375479a18 100644
--- a/src/components/AddWithdraw/AddWithdrawRouterView.tsx
+++ b/src/components/AddWithdraw/AddWithdrawRouterView.tsx
@@ -98,6 +98,7 @@ export const AddWithdrawRouterView: FC = ({
acc.type === AccountType.IBAN ||
acc.type === AccountType.US ||
acc.type === AccountType.CLABE ||
+ acc.type === AccountType.GB ||
acc.type === AccountType.MANTECA
) ?? []
diff --git a/src/components/AddWithdraw/DynamicBankAccountForm.tsx b/src/components/AddWithdraw/DynamicBankAccountForm.tsx
index a2ffab55d..c94b48157 100644
--- a/src/components/AddWithdraw/DynamicBankAccountForm.tsx
+++ b/src/components/AddWithdraw/DynamicBankAccountForm.tsx
@@ -8,7 +8,13 @@ import BaseInput from '@/components/0_Bruddle/BaseInput'
import BaseSelect from '@/components/0_Bruddle/BaseSelect'
import { BRIDGE_ALPHA3_TO_ALPHA2, ALL_COUNTRIES_ALPHA3_TO_ALPHA2 } from '@/components/AddMoney/consts'
import { useParams, useRouter } from 'next/navigation'
-import { validateIban, validateBic, isValidRoutingNumber } from '@/utils/bridge-accounts.utils'
+import {
+ validateIban,
+ validateBic,
+ isValidRoutingNumber,
+ isValidSortCode,
+ isValidUKAccountNumber,
+} from '@/utils/bridge-accounts.utils'
import ErrorAlert from '@/components/Global/ErrorAlert'
import { getBicFromIban } from '@/app/actions/ibanToBic'
import PeanutActionDetailsCard, { type PeanutActionDetailsCardProps } from '../Global/PeanutActionDetailsCard'
@@ -35,6 +41,7 @@ export type IBankAccountDetails = {
accountNumber: string
bic: string
routingNumber: string
+ sortCode: string // uk bank accounts
clabe: string
street: string
city: string
@@ -71,7 +78,8 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
) => {
const isMx = country.toUpperCase() === 'MX'
const isUs = country.toUpperCase() === 'USA'
- const isIban = isUs || isMx ? false : isIBANCountry(country)
+ const isUk = country.toUpperCase() === 'GB' || country.toUpperCase() === 'GBR'
+ const isIban = isUs || isMx || isUk ? false : isIBANCountry(country)
const { user } = useAuth()
const dispatch = useAppDispatch()
const [isSubmitting, setIsSubmitting] = useState(false)
@@ -107,6 +115,7 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
accountNumber: '',
bic: '',
routingNumber: '',
+ sortCode: '', // uk bank accounts
clabe: '',
street: '',
city: '',
@@ -162,12 +171,14 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
const isUs = country.toUpperCase() === 'USA'
const isMx = country.toUpperCase() === 'MX'
- const isIban = isUs || isMx ? false : isIBANCountry(country)
+ const isUk = country.toUpperCase() === 'GB' || country.toUpperCase() === 'GBR'
+ const isIban = isUs || isMx || isUk ? false : isIBANCountry(country)
let accountType: BridgeAccountType
if (isIban) accountType = BridgeAccountType.IBAN
else if (isUs) accountType = BridgeAccountType.US
else if (isMx) accountType = BridgeAccountType.CLABE
+ else if (isUk) accountType = BridgeAccountType.GB
else throw new Error('Unsupported country')
const accountNumber = isMx ? data.clabe : data.accountNumber
@@ -193,9 +204,14 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
let bic = data.bic || getValues('bic')
const iban = data.iban || getValues('iban')
+ // uk account numbers may be 6-7 digits, pad to 8 for bridge api
+ const cleanedAccountNumber = isUk
+ ? accountNumber.replace(/\s/g, '').padStart(8, '0')
+ : accountNumber.replace(/\s/g, '')
+
const payload: Partial = {
accountType,
- accountNumber: accountNumber.replace(/\s/g, ''),
+ accountNumber: cleanedAccountNumber,
countryCode: isUs ? 'USA' : country.toUpperCase(),
countryName: selectedCountry,
accountOwnerType: BridgeAccountOwnerType.INDIVIDUAL,
@@ -217,11 +233,16 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
payload.routingNumber = data.routingNumber
}
+ if (isUk && data.sortCode) {
+ payload.sortCode = data.sortCode.replace(/[-\s]/g, '')
+ }
+
const result = await onSuccess(payload as AddBankAccountPayload, {
...data,
iban: isIban ? data.accountNumber || iban || '' : '',
accountNumber: isIban ? '' : data.accountNumber,
bic: bic,
+ sortCode: isUk ? data.sortCode : '',
country,
firstName: firstName.trim(),
lastName: lastName.trim(),
@@ -458,16 +479,27 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
}
}
)
- : renderInput(
- 'accountNumber',
- 'Account Number',
- {
- required: 'Account number is required',
- validate: async (value: string) =>
- validateUSBankAccount(value).isValid || 'Invalid account number',
- },
- 'text'
- )}
+ : isUk
+ ? renderInput(
+ 'accountNumber',
+ 'Account Number',
+ {
+ required: 'Account number is required',
+ validate: (value: string) =>
+ isValidUKAccountNumber(value) || 'Account number must be 6-8 digits',
+ },
+ 'text'
+ )
+ : renderInput(
+ 'accountNumber',
+ 'Account Number',
+ {
+ required: 'Account number is required',
+ validate: async (value: string) =>
+ validateUSBankAccount(value).isValid || 'Invalid account number',
+ },
+ 'text'
+ )}
{isIban &&
renderInput(
@@ -503,8 +535,13 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
validate: async (value: string) =>
(await isValidRoutingNumber(value)) || 'Invalid routing number',
})}
+ {isUk &&
+ renderInput('sortCode', 'Sort Code', {
+ required: 'Sort code is required',
+ validate: (value: string) => isValidSortCode(value) || 'Sort code must be 6 digits',
+ })}
- {!isIban && (
+ {!isIban && !isUk && (
<>
{renderInput(
'street',
diff --git a/src/components/Auth/auth.e2e.test.ts b/src/components/Auth/auth.e2e.test.ts
new file mode 100644
index 000000000..a80979f24
--- /dev/null
+++ b/src/components/Auth/auth.e2e.test.ts
@@ -0,0 +1,106 @@
+import { test, expect } from '@playwright/test'
+
+/**
+ * Authentication Flow E2E Tests
+ *
+ * Tests basic auth UI flows without actual wallet connections.
+ * Does NOT test MetaMask/WalletConnect popups (external dependencies).
+ *
+ * Focus: UI rendering, navigation, error states
+ */
+
+test.describe('Auth UI Flow', () => {
+ test('should show auth options when not logged in', async ({ page }) => {
+ await page.goto('/')
+
+ // look for common auth UI elements
+ // adjust selectors based on actual implementation
+ const authElements = [
+ page.getByRole('button', { name: /connect|sign in|log in/i }),
+ page.locator('text=/wallet|authenticate/i'),
+ ]
+
+ // Check if any auth element is visible
+ let foundAuthElement = false
+ for (const el of authElements) {
+ const visible = await el.isVisible().catch(() => false)
+ if (visible) {
+ foundAuthElement = true
+ break
+ }
+ }
+
+ // If no auth UI visible, user might already be logged in or auth is elsewhere
+ // This is a soft assertion - real implementation varies
+ // We just log and don't fail since auth UI location varies by implementation
+ })
+
+ test('should open auth modal/drawer when connect clicked', async ({ page }) => {
+ await page.goto('/')
+
+ // find and click connect button
+ const connectButton = page.getByRole('button', { name: /connect|sign in|log in/i }).first()
+
+ if (await connectButton.isVisible()) {
+ await connectButton.click()
+
+ // should show modal or drawer with wallet options
+ // look for common wallet names
+ await expect(page.locator('text=/metamask|walletconnect|coinbase|rainbow/i').first()).toBeVisible({
+ timeout: 5000,
+ })
+ }
+ })
+
+ test('should close auth modal when close button clicked', async ({ page }) => {
+ await page.goto('/')
+
+ // open auth modal
+ const connectButton = page.getByRole('button', { name: /connect|sign in|log in/i }).first()
+
+ if (await connectButton.isVisible()) {
+ await connectButton.click()
+
+ // wait for modal to appear
+ await page.waitForSelector('text=/metamask|walletconnect/i', { timeout: 5000 })
+
+ // find and click close button
+ const closeButton = page.getByRole('button', { name: /close|cancel|×/i }).first()
+
+ if (await closeButton.isVisible()) {
+ await closeButton.click()
+
+ // modal should be closed
+ await expect(page.locator('text=/metamask|walletconnect/i').first()).not.toBeVisible()
+ }
+ }
+ })
+})
+
+test.describe('Auth State Persistence', () => {
+ test('should maintain auth state across page navigation', async ({ page }) => {
+ // this test requires actual auth - skip for now
+ // real auth requires wallet connection which is external dependency
+ test.skip()
+ })
+
+ test('should handle auth state on page refresh', async ({ page }) => {
+ // skip - requires actual wallet connection
+ test.skip()
+ })
+})
+
+test.describe('Protected Routes', () => {
+ test('should redirect unauthenticated users from protected routes', async ({ page }) => {
+ // try to access a protected route
+ // adjust route based on actual protected pages
+ await page.goto('/profile')
+
+ // wait for client-side redirect to occur (useEffect-based auth redirect)
+ await page.waitForURL(/\/setup|\/home|^\/$/, { timeout: 10000 })
+
+ // verify user is NOT on the protected route
+ const url = page.url()
+ expect(url).not.toContain('/profile')
+ })
+})
diff --git a/src/components/Badges/badge.utils.ts b/src/components/Badges/badge.utils.ts
index 65c82761f..58461b552 100644
--- a/src/components/Badges/badge.utils.ts
+++ b/src/components/Badges/badge.utils.ts
@@ -13,6 +13,7 @@ const CODE_TO_PATH: Record = {
BIGGEST_REQUEST_POT: '/badges/biggest_request_pot.svg',
SEEDLING_DEVCONNECT_BA_2025: '/badges/seedlings_devconnect.svg',
ARBIVERSE_DEVCONNECT_BA_2025: '/badges/arbiverse_devconnect.svg',
+ CARD_PIONEER: '/badges/peanut-pioneer.png',
}
// public-facing descriptions for badges (third-person perspective)
@@ -28,6 +29,7 @@ const PUBLIC_DESCRIPTIONS: Record = {
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.',
+ CARD_PIONEER: 'A true Card Pioneer. Among the first to pay everywhere with Peanut.',
}
export function getBadgeIcon(code?: string) {
diff --git a/src/components/Badges/index.tsx b/src/components/Badges/index.tsx
index b97b044eb..b63dfa4f7 100644
--- a/src/components/Badges/index.tsx
+++ b/src/components/Badges/index.tsx
@@ -9,18 +9,25 @@ import { getCardPosition } from '../Global/Card/card.utils'
import EmptyState from '../Global/EmptyStates/EmptyState'
import { Icon } from '../Global/Icons/Icon'
import ActionModal from '../Global/ActionModal'
-import { useMemo, useState } from 'react'
+import { useMemo, useState, useEffect } from 'react'
import { useUserStore } from '@/redux/hooks'
import { ActionListCard } from '../ActionListCard'
+import { useAuth } from '@/context/authContext'
type BadgeView = { title: string; description: string; logo: string | StaticImageData }
export const Badges = () => {
const router = useRouter()
const { user: authUser } = useUserStore()
+ const { fetchUser } = useAuth()
const [isBadgeModalOpen, setIsBadgeModalOpen] = useState(false)
const [selectedBadge, setSelectedBadge] = useState(null)
+ // TODO: fetchUser from context may not be memoized - could cause unnecessary re-renders
+ useEffect(() => {
+ fetchUser()
+ }, [fetchUser])
+
// map api badges to view badges
const badges: BadgeView[] = useMemo(() => {
// get badges from user object and map to card fields
diff --git a/src/components/Card/CardDetailsScreen.tsx b/src/components/Card/CardDetailsScreen.tsx
new file mode 100644
index 000000000..42c556c52
--- /dev/null
+++ b/src/components/Card/CardDetailsScreen.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import { Button } from '@/components/0_Bruddle/Button'
+import Card from '@/components/Global/Card'
+import NavHeader from '@/components/Global/NavHeader'
+import Image from 'next/image'
+import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif'
+
+interface CardDetailsScreenProps {
+ price: number
+ currentTier: number
+ onContinue: () => void
+ onBack: () => void
+}
+
+const CardDetailsScreen = ({ price, currentTier, onContinue, onBack }: CardDetailsScreenProps) => {
+ const isDiscounted = currentTier >= 2
+ const originalPrice = 10
+
+ return (
+ (null)
+ const [animationKey, setAnimationKey] = useState(0)
+ const prevDigitRef = useRef(digit)
+
+ useEffect(() => {
+ if (digit !== prevDigitRef.current) {
+ setPrevDigit(prevDigitRef.current)
+ setCurrentDigit(digit)
+ setAnimationKey((k) => k + 1)
+ prevDigitRef.current = digit
+
+ // Clear prevDigit after animation
+ const timer = setTimeout(() => {
+ setPrevDigit(null)
+ }, duration)
+
+ return () => clearTimeout(timer)
+ }
+ }, [digit, duration])
+
+ const animationStyle = `
+ @keyframes slideOut {
+ from { transform: translateY(0); opacity: 1; }
+ to { transform: translateY(-100%); opacity: 0; }
+ }
+ @keyframes slideIn {
+ from { transform: translateY(100%); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+ }
+ `
+
+ return (
+
+
+ {/* Previous digit - slides out */}
+ {prevDigit !== null && (
+
+ {prevDigit}
+
+ )}
+ {/* Current digit - slides in (or static if no animation) */}
+
+ {currentDigit}
+
+
+ )
+}
+
+// Rolling number display - splits number into digits and animates each
+const RollingNumber = ({ value, duration = 400 }: { value: number; duration?: number }) => {
+ const digits = String(value).split('')
+
+ return (
+
+ {digits.map((digit, index) => (
+ (null)
+ const timeoutRef = useRef(null)
+ const hasAnimated = useRef(false)
+
+ // Realistic slot decrement: first tick after 4-12s, then every 15-40s
+ useEffect(() => {
+ if (slotsRemaining === undefined) return
+
+ // Update display value on refetch without re-triggering the animation
+ if (hasAnimated.current) {
+ setDisplayValue(slotsRemaining)
+ return
+ }
+
+ hasAnimated.current = true
+ setDisplayValue(slotsRemaining)
+
+ const scheduleTick = (isFirst: boolean) => {
+ const delay = isFirst
+ ? 2000 + Math.random() * 3000 // 2-5 seconds for first tick
+ : 8000 + Math.random() * 12000 // 8-20 seconds for subsequent ticks
+ timeoutRef.current = setTimeout(() => {
+ setDisplayValue((prev) => {
+ if (prev === null || prev <= 1) return prev
+ return prev - 1
+ })
+ scheduleTick(false)
+ }, delay)
+ }
+
+ scheduleTick(true)
+
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
+ }
+ }, [slotsRemaining])
+
+ return (
+
+
+ )
+}
+
+export default CardPioneerModal
diff --git a/src/components/Card/CardPurchaseScreen.tsx b/src/components/Card/CardPurchaseScreen.tsx
new file mode 100644
index 000000000..4c1b7f7ca
--- /dev/null
+++ b/src/components/Card/CardPurchaseScreen.tsx
@@ -0,0 +1,216 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { Button } from '@/components/0_Bruddle/Button'
+import NavHeader from '@/components/Global/NavHeader'
+import { Icon } from '@/components/Global/Icons/Icon'
+import Card from '@/components/Global/Card'
+import { cardApi, CardPurchaseError } from '@/services/card'
+import Loading from '@/components/Global/Loading'
+
+interface CardPurchaseScreenProps {
+ price: number
+ existingChargeUuid?: string | null
+ existingPaymentUrl?: string | null
+ onPurchaseInitiated: (chargeUuid: string, paymentUrl: string) => void
+ onPurchaseComplete: () => void
+ onBack: () => void
+}
+
+type PurchaseState = 'idle' | 'creating' | 'awaiting_payment' | 'error'
+
+const CardPurchaseScreen = ({
+ price,
+ existingChargeUuid,
+ existingPaymentUrl,
+ onPurchaseInitiated,
+ onPurchaseComplete,
+ onBack,
+}: CardPurchaseScreenProps) => {
+ const [purchaseState, setPurchaseState] = useState(existingChargeUuid ? 'awaiting_payment' : 'idle')
+ const [chargeUuid, setChargeUuid] = useState(existingChargeUuid || null)
+ const [paymentUrl, setPaymentUrl] = useState(existingPaymentUrl || null)
+ const [error, setError] = useState(null)
+
+ // Guard against double-submit race condition (React state updates are async,
+ // so rapid clicks could trigger multiple API calls before state updates)
+ const isInitiatingRef = useRef(false)
+
+ // Initialize purchase with debounce guard
+ const initiatePurchase = useCallback(async () => {
+ if (isInitiatingRef.current) return
+ isInitiatingRef.current = true
+
+ setPurchaseState('creating')
+ setError(null)
+
+ try {
+ const response = await cardApi.purchase()
+ setChargeUuid(response.chargeUuid)
+ setPaymentUrl(response.paymentUrl)
+ onPurchaseInitiated(response.chargeUuid, response.paymentUrl)
+ setPurchaseState('awaiting_payment')
+ } catch (err) {
+ if (err instanceof CardPurchaseError) {
+ if (err.code === 'ALREADY_PURCHASED') {
+ // User already purchased, redirect to success
+ onPurchaseComplete()
+ return
+ }
+ setError(err.message)
+ } else {
+ setError('Failed to initiate purchase. Please try again.')
+ }
+ setPurchaseState('error')
+ } finally {
+ isInitiatingRef.current = false
+ }
+ }, [onPurchaseInitiated, onPurchaseComplete])
+
+ // Open payment URL in new tab
+ const openPaymentUrl = useCallback(() => {
+ if (paymentUrl) {
+ window.open(paymentUrl, '_blank', 'noopener,noreferrer')
+ }
+ }, [paymentUrl])
+
+ // Poll for payment completion with timeout
+ useEffect(() => {
+ if (purchaseState !== 'awaiting_payment' || !chargeUuid) return
+
+ let attempts = 0
+ const maxAttempts = 40 // 40 attempts * 3s = 2 minutes max
+
+ const pollInterval = setInterval(async () => {
+ attempts++
+
+ // Check for timeout
+ if (attempts > maxAttempts) {
+ clearInterval(pollInterval)
+ setError('Payment verification timed out. Please check your transaction status.')
+ setPurchaseState('error')
+ return
+ }
+
+ try {
+ const info = await cardApi.getInfo()
+ if (info.hasPurchased) {
+ clearInterval(pollInterval)
+ onPurchaseComplete()
+ }
+ } catch {
+ // Ignore polling errors - will retry on next interval
+ }
+ }, 3000)
+
+ return () => clearInterval(pollInterval)
+ }, [purchaseState, chargeUuid, onPurchaseComplete])
+
+ return (
+ setIsInviteModalOpen(false)}
+ username={user?.user?.username ?? ''}
+ />
+
+ )
+}
+
+export default CardSuccessScreen
diff --git a/src/components/Claim/Link/views/BankFlowManager.view.tsx b/src/components/Claim/Link/views/BankFlowManager.view.tsx
index f19e1ccd5..2e6519249 100644
--- a/src/components/Claim/Link/views/BankFlowManager.view.tsx
+++ b/src/components/Claim/Link/views/BankFlowManager.view.tsx
@@ -286,7 +286,7 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
? addBankAccountResponse.data.identifier || ''
: '',
accountNumber:
- addBankAccountResponse.data.type === 'us'
+ addBankAccountResponse.data.type === 'us' || addBankAccountResponse.data.type === 'gb'
? addBankAccountResponse.data.identifier || ''
: '',
country: addBankAccountResponse.data.details.countryCode,
@@ -294,6 +294,7 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
bridgeAccountId: addBankAccountResponse.data.bridgeAccountId,
bic: addBankAccountResponse.data.bic ?? '',
routingNumber: addBankAccountResponse.data.routingNumber ?? '',
+ sortCode: addBankAccountResponse.data.sortCode ?? '',
firstName: addBankAccountResponse.data.firstName || rawData.firstName,
lastName: addBankAccountResponse.data.lastName || rawData.lastName,
email: user?.user.email ?? '',
@@ -365,6 +366,7 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
accountNumber: externalAccountResponse.account_number ?? rawData.accountNumber,
bic: externalAccountResponse?.iban?.bic ?? rawData.bic,
routingNumber: externalAccountResponse?.account?.routing_number ?? rawData.routingNumber,
+ sortCode: externalAccountResponse?.account?.sort_code ?? rawData.sortCode ?? '',
clabe: externalAccountResponse?.clabe?.account_number ?? rawData.clabe,
street: externalAccountResponse?.address?.street_line_1 ?? rawData.street,
city: externalAccountResponse?.address?.city ?? rawData.city,
@@ -420,12 +422,14 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
name: account.details.accountOwnerName || user?.user.fullName || '',
iban: account.type === 'iban' ? account.identifier || '' : '',
clabe: account.type === 'clabe' ? account.identifier || '' : '',
- accountNumber: account.type === 'us' ? account.identifier || '' : '',
+ accountNumber:
+ account.type === 'us' || account.type === 'gb' ? account.identifier || '' : '',
country: account.details.countryCode,
id: account.id,
bridgeAccountId: account.bridgeAccountId,
bic: account.bic ?? '',
routingNumber: account.routingNumber ?? '',
+ sortCode: account.sortCode ?? '',
firstName: firstName,
lastName: lastName,
email: user?.user.email ?? '',
diff --git a/src/components/Common/PointsCard.tsx b/src/components/Common/PointsCard.tsx
index 5a39115cd..36b395260 100644
--- a/src/components/Common/PointsCard.tsx
+++ b/src/components/Common/PointsCard.tsx
@@ -1,12 +1,13 @@
import Card from '../Global/Card'
import InvitesIcon from '../Home/InvitesIcon'
+import { formatPoints } from '@/utils/format.utils'
const PointsCard = ({ points, pointsDivRef }: { points: number; pointsDivRef: React.RefObject }) => {
return (
)
diff --git a/src/components/Global/AnimateOnView.tsx b/src/components/Global/AnimateOnView.tsx
new file mode 100644
index 000000000..64f07753b
--- /dev/null
+++ b/src/components/Global/AnimateOnView.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import { useRef, useEffect, type CSSProperties } from 'react'
+
+type AnimateOnViewProps = {
+ children: React.ReactNode
+ className?: string
+ delay?: string
+ y?: string
+ x?: string
+ rotate?: string
+ style?: CSSProperties
+} & React.HTMLAttributes
+
+export function AnimateOnView({ children, className, delay, y, x, rotate, style, ...rest }: AnimateOnViewProps) {
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const el = ref.current
+ if (!el) return
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ el.classList.add('in-view')
+ observer.disconnect()
+ }
+ },
+ { threshold: 0.1 }
+ )
+ observer.observe(el)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
-
diff --git a/src/app/(mobile-ui)/points/invites/page.tsx b/src/app/(mobile-ui)/points/invites/page.tsx
index 949777c86..3a543e76f 100644
--- a/src/app/(mobile-ui)/points/invites/page.tsx
+++ b/src/app/(mobile-ui)/points/invites/page.tsx
@@ -16,10 +16,17 @@ import Image from 'next/image'
import EmptyState from '@/components/Global/EmptyStates/EmptyState'
import { getInitialsFromName } from '@/utils/general.utils'
import { type PointsInvite } from '@/services/services.types'
+import { formatPoints } from '@/utils/format.utils'
+import { useCountUp } from '@/hooks/useCountUp'
+import { useInView } from 'framer-motion'
+import { useRef } from 'react'
+import InviteePointsBadge from '@/components/Points/InviteePointsBadge'
const InvitesPage = () => {
const router = useRouter()
const { user } = useAuth()
+ const listRef = useRef(null)
+ const listInView = useInView(listRef, { once: true, margin: '-50px' })
const {
data: invites,
@@ -32,6 +39,17 @@ const InvitesPage = () => {
enabled: !!user?.user.userId,
})
+ const totalPointsEarned =
+ invites?.invitees?.reduce((sum: number, invite: PointsInvite) => {
+ return sum + (invite.contributedPoints ?? 0)
+ }, 0) || 0
+
+ const animatedTotal = useCountUp(totalPointsEarned, {
+ storageKey: 'invites_total',
+ duration: 1.8,
+ enabled: !isLoading && !isError,
+ })
+
if (isLoading) {
return
-
+ )}
{/* Main content area */}
+
-
+
{/* Banner component handles maintenance and feedback banners */}
-
-
+ {!isDev && (
+
+
+ )}
{/* Scrollable content area */}
{
'relative flex-1 overflow-y-auto bg-background p-6 pb-24 md:pb-6',
!!isSupport && 'p-0 pb-20 md:p-6',
!!isHome && 'p-0 md:p-6 md:pr-0',
- isUserLoggedIn ? 'pb-24' : 'pb-4'
+ isUserLoggedIn ? 'pb-24' : 'pb-4',
+ isDev && 'p-0 pb-0'
)
)}
>
@@ -170,7 +185,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
'flex w-full items-center justify-center md:ml-auto md:w-[calc(100%-160px)]',
alignStart && 'items-start',
isSupport && 'h-full',
- isUserLoggedIn ? 'min-h-[calc(100dvh-160px)]' : 'min-h-[calc(100dvh-64px)]'
+ isUserLoggedIn ? 'min-h-[calc(100dvh-160px)]' : 'min-h-[calc(100dvh-64px)]',
+ isDev && 'min-h-[100dvh] items-start justify-start md:ml-0 md:w-full'
)}
>
{children}
@@ -179,9 +195,11 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
{/* Mobile navigation */}
-
-
+ {!isDev && (
+
+
+ )}
People you invited
{/* Full list */} -
+
)
diff --git a/src/app/(mobile-ui)/points/page.tsx b/src/app/(mobile-ui)/points/page.tsx
index 6f6ec33ec..7690531a5 100644
--- a/src/app/(mobile-ui)/points/page.tsx
+++ b/src/app/(mobile-ui)/points/page.tsx
@@ -3,17 +3,15 @@
import PageContainer from '@/components/0_Bruddle/PageContainer'
import Card from '@/components/Global/Card'
import { getCardPosition } from '@/components/Global/Card/card.utils'
-import CopyToClipboard from '@/components/Global/CopyToClipboard'
import { Icon } from '@/components/Global/Icons/Icon'
import NavHeader from '@/components/Global/NavHeader'
import NavigationArrow from '@/components/Global/NavigationArrow'
import PeanutLoading from '@/components/Global/PeanutLoading'
-import ShareButton from '@/components/Global/ShareButton'
import TransactionAvatarBadge from '@/components/TransactionDetails/TransactionAvatarBadge'
import { VerifiedUserLabel } from '@/components/UserHeader'
import { useAuth } from '@/context/authContext'
import { invitesApi } from '@/services/invites'
-import { generateInviteCodeLink, generateInvitesShareText, getInitialsFromName } from '@/utils/general.utils'
+import { getInitialsFromName } from '@/utils/general.utils'
import { useQuery } from '@tanstack/react-query'
import { useRouter } from 'next/navigation'
import { STAR_STRAIGHT_ICON, TIER_0_BADGE, TIER_1_BADGE, TIER_2_BADGE, TIER_3_BADGE } from '@/assets'
@@ -21,13 +19,22 @@ import Image from 'next/image'
import { pointsApi } from '@/services/points'
import EmptyState from '@/components/Global/EmptyStates/EmptyState'
import { type PointsInvite } from '@/services/services.types'
-import { useEffect } from 'react'
+import { useEffect, useRef, useState } from 'react'
import InvitesGraph from '@/components/Global/InvitesGraph'
-import { IS_DEV } from '@/constants/general.consts'
+import { CashCard } from '@/components/Points/CashCard'
+import InviteFriendsModal from '@/components/Global/InviteFriendsModal'
+import { formatPoints, shortenPoints } from '@/utils/format.utils'
+import { Button } from '@/components/0_Bruddle/Button'
+import { useCountUp } from '@/hooks/useCountUp'
+import { useInView } from 'framer-motion'
+import InviteePointsBadge from '@/components/Points/InviteePointsBadge'
const PointsPage = () => {
const router = useRouter()
const { user, fetchUser } = useAuth()
+ const [isInviteModalOpen, setIsInviteModalOpen] = useState(false)
+ const inviteesRef = useRef(null)
+ const inviteesInView = useInView(inviteesRef, { once: true, margin: '-50px' })
const getTierBadge = (tier: number) => {
const badges = [TIER_0_BADGE, TIER_1_BADGE, TIER_2_BADGE, TIER_3_BADGE]
@@ -55,18 +62,31 @@ const PointsPage = () => {
enabled: !!user?.user.userId,
})
- // In dev mode, show graph for all users. In production, only for Seedling badge holders.
- const hasSeedlingBadge = user?.user?.badges?.some((badge) => badge.code === 'SEEDLING_DEVCONNECT_BA_2025')
+ // Referral graph is now available for all users
const { data: myGraphResult } = useQuery({
queryKey: ['myInviteGraph', user?.user.userId],
queryFn: () => pointsApi.getUserInvitesGraph(),
- enabled: !!user?.user.userId && (IS_DEV || hasSeedlingBadge),
+ enabled: !!user?.user.userId,
+ })
+
+ // Cash status (comprehensive earnings tracking)
+ const { data: cashStatus } = useQuery({
+ queryKey: ['cashStatus', user?.user.userId],
+ queryFn: () => pointsApi.getCashStatus(),
+ enabled: !!user?.user.userId,
})
+
const username = user?.user.username
- const { inviteCode, inviteLink } = generateInviteCodeLink(username ?? '')
+
+ // animated hero points — remembers last-seen value across visits
+ const animatedTotal = useCountUp(tierInfo?.data?.totalPoints ?? 0, {
+ storageKey: 'hero_total',
+ duration: 1.8,
+ enabled: !!tierInfo?.data,
+ })
useEffect(() => {
- // Re-fetch user to get the latest invitees list for showing heart Icon
+ // re-fetch user to get the latest invitees list for showing heart icon
fetchUser()
}, [])
@@ -89,95 +109,85 @@ const PointsPage = () => {
{invites?.invitees?.map((invite: PointsInvite, i: number) => {
const username = invite.username
const fullName = invite.fullName
const isVerified = invite.kycStatus === 'approved'
- const pointsEarned = Math.floor(invite.totalPoints * 0.2)
+ const pointsEarned = invite.contributedPoints ?? 0
// respect user's showFullName preference for avatar and display name
const displayName = invite.showFullName && fullName ? fullName : username
return (
@@ -103,9 +115,7 @@ const InvitesPage = () => {
isVerified={isVerified}
/>
- - +{pointsEarned} {pointsEarned === 1 ? 'pt' : 'pts'} -
+
+ {/* consolidated points and cash card */}
+
+ {/* points section */}
+
+
- {tierInfo.data.totalPoints} {tierInfo.data.totalPoints === 1 ? 'Point' : 'Points'} + {(() => { + const { number, suffix } = shortenPoints(animatedTotal) + return ( + <> + {number} + {suffix && {suffix}} + + ) + })()}{' '} + {tierInfo.data.totalPoints === 1 ? 'Point' : 'Points'}
-
diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx
index 58adcebd2..fe8631a4c 100644
--- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx
+++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx
@@ -135,11 +135,12 @@ export default function AddMoneyBankDetails({ flow = 'add-money' }: IAddMoneyBan
return formatCurrencyAmount(amount, onrampCurrency)
}, [amount, onrampCurrency, flow])
+ const isUk = currentCountryDetails?.id === 'GB' || currentCountryDetails?.iso3 === 'GBR'
+
const generateBankDetails = async () => {
const formattedAmount = formattedCurrencyAmount
const isMexico = currentCountryDetails?.id === 'MX'
const isUs = currentCountryDetails?.id === 'US'
- const isEuro = !isUs && !isMexico
let bankDetails = `Bank Transfer Details:
Amount: ${formattedAmount}
@@ -152,7 +153,7 @@ Beneficiary Address: ${onrampData?.depositInstructions?.bankBeneficiaryAddress}
`
}
- if (isEuro || isMexico) {
+ if (!isUs && !isMexico && !isUk) {
bankDetails += `
Account Holder Name: ${onrampData?.depositInstructions?.accountHolderName}
`
@@ -161,11 +162,19 @@ Account Holder Name: ${onrampData?.depositInstructions?.accountHolderName}
// for mexico, include clabe
if (isMexico) {
bankDetails += `
+Account Holder Name: ${onrampData?.depositInstructions?.accountHolderName}
CLABE: ${onrampData?.depositInstructions?.clabe || 'Loading...'}`
}
- // only include bank address and account details for non-mexico countries
- if (!isMexico) {
+ // uk faster payments
+ if (isUk) {
+ bankDetails += `
+Sort Code: ${onrampData?.depositInstructions?.sortCode || 'Loading...'}
+Account Number: ${onrampData?.depositInstructions?.accountNumber || 'Loading...'}`
+ }
+
+ // us and sepa countries
+ if (!isMexico && !isUk) {
bankDetails += `
Bank Address: ${onrampData?.depositInstructions?.bankAddress || 'Loading...'}`
@@ -297,45 +306,60 @@ Please use these details to complete your bank transfer.`
allowCopy={!!onrampData?.depositInstructions?.clabe}
hideBottomBorder
/>
+ ) : isUk ? (
+ <>
+
- {
+ const { locale, country } = await params
+ if (!isValidLocale(locale)) return {}
+
+ const seo = COUNTRIES_SEO[country]
+ if (!seo) return {}
+
+ const mdxContent = readPageContentLocalized<{ title: string; description: string; published?: boolean }>(
+ 'countries',
+ country,
+ locale
+ )
+ if (!mdxContent || mdxContent.frontmatter.published === false) return {}
+
+ return {
+ ...metadataHelper({
+ title: mdxContent.frontmatter.title,
+ description: mdxContent.frontmatter.description,
+ canonical: `/${locale}/${country}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/${country}`,
+ languages: getBareAlternates(country),
+ },
+ }
+}
+
+export default async function CountryHubPage({ params }: PageProps) {
+ const { locale, country } = await params
+ if (!isValidLocale(locale)) notFound()
+ if (!COUNTRIES_SEO[country]) notFound()
+
+ const mdxSource = readPageContentLocalized('countries', country, locale)
+ if (!mdxSource || mdxSource.frontmatter.published === false) notFound()
+
+ const { content } = await renderContent(mdxSource.body)
+ const i18n = getTranslations(locale)
+ const countryName = getCountryName(country, locale)
+
+ return (
+
+ {content}
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/blog/[slug]/page.tsx b/src/app/[locale]/(marketing)/blog/[slug]/page.tsx
new file mode 100644
index 000000000..418455970
--- /dev/null
+++ b/src/app/[locale]/(marketing)/blog/[slug]/page.tsx
@@ -0,0 +1,147 @@
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { type Metadata } from 'next'
+import { generateMetadata as metadataHelper } from '@/app/metadata'
+import { getAllPosts, getPostBySlug } from '@/lib/blog'
+import { MarketingShell } from '@/components/Marketing/MarketingShell'
+import { JsonLd } from '@/components/Marketing/JsonLd'
+import { SUPPORTED_LOCALES, getAlternates, isValidLocale } from '@/i18n/config'
+import type { Locale } from '@/i18n/types'
+import { getTranslations } from '@/i18n'
+
+interface PageProps {
+ params: Promise<{ locale: string; slug: string }>
+}
+
+export async function generateStaticParams() {
+ if (process.env.NODE_ENV === 'production') return []
+ // Generate params for locales that have blog content (fall back to en slugs)
+ return SUPPORTED_LOCALES.flatMap((locale) => {
+ let posts = getAllPosts(locale as Locale)
+ if (posts.length === 0) posts = getAllPosts('en')
+ return posts.map((post) => ({ locale, slug: post.slug }))
+ })
+}
+// TODO: when blog content is added to src/content/blog/, either remove the
+// production guard in generateStaticParams above, or set dynamicParams = true.
+// Currently no blog posts exist so this has no effect, but with content present
+// the combination of returning [] in prod + dynamicParams = false would 404 all
+// blog pages.
+export const dynamicParams = false
+
+export async function generateMetadata({ params }: PageProps): Promise {
+ const { locale, slug } = await params
+ if (!isValidLocale(locale)) return {}
+
+ // Try locale-specific post first, fall back to English
+ const post = (await getPostBySlug(slug, locale as Locale)) ?? (await getPostBySlug(slug, 'en'))
+ if (!post) return {}
+
+ return {
+ ...metadataHelper({
+ title: `${post.frontmatter.title} | Peanut`,
+ description: post.frontmatter.description,
+ canonical: `/${locale}/blog/${slug}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/blog/${slug}`,
+ languages: getAlternates('blog', slug),
+ },
+ }
+}
+
+export default async function BlogPostPageLocalized({ params }: PageProps) {
+ const { locale, slug } = await params
+ if (!isValidLocale(locale)) notFound()
+
+ const post = (await getPostBySlug(slug, locale as Locale)) ?? (await getPostBySlug(slug, 'en'))
+ if (!post) notFound()
+
+ const i18n = getTranslations(locale)
+
+ const blogPostSchema = {
+ '@context': 'https://schema.org',
+ '@type': 'BlogPosting',
+ headline: post.frontmatter.title,
+ description: post.frontmatter.description,
+ datePublished: post.frontmatter.date,
+ inLanguage: locale,
+ author: { '@type': 'Organization', name: post.frontmatter.author ?? 'Peanut' },
+ publisher: { '@type': 'Organization', name: 'Peanut', url: 'https://peanut.me' },
+ mainEntityOfPage: `https://peanut.me/${locale}/blog/${slug}`,
+ }
+
+ // FAQ schema from frontmatter (optional)
+ const faqs = post.frontmatter.faqs
+ const faqSchema = faqs?.length
+ ? {
+ '@context': 'https://schema.org',
+ '@type': 'FAQPage',
+ mainEntity: faqs.map((faq) => ({
+ '@type': 'Question',
+ name: faq.question,
+ acceptedAnswer: { '@type': 'Answer', text: faq.answer },
+ })),
+ }
+ : null
+
+ const breadcrumbs = [
+ { name: i18n.home, href: '/' },
+ { name: i18n.blog, href: `/${locale}/blog` },
+ { name: post.frontmatter.title, href: `/${locale}/blog/${slug}` },
+ ]
+
+ const breadcrumbSchema = {
+ '@context': 'https://schema.org',
+ '@type': 'BreadcrumbList',
+ itemListElement: breadcrumbs.map((crumb, i) => ({
+ '@type': 'ListItem',
+ position: i + 1,
+ name: crumb.name,
+ item: crumb.href.startsWith('http') ? crumb.href : `https://peanut.me${crumb.href}`,
+ })),
+ }
+
+ return (
+ <>
+
+
+
+ {post.frontmatter.category && (
+
+ {post.frontmatter.category}
+
+ )}
+
+
+
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/blog/category/[cat]/page.tsx b/src/app/[locale]/(marketing)/blog/category/[cat]/page.tsx
new file mode 100644
index 000000000..71a911f53
--- /dev/null
+++ b/src/app/[locale]/(marketing)/blog/category/[cat]/page.tsx
@@ -0,0 +1,101 @@
+import { notFound } from 'next/navigation'
+import { type Metadata } from 'next'
+import { generateMetadata as metadataHelper } from '@/app/metadata'
+import { getAllCategories, getPostsByCategory } from '@/lib/blog'
+import { MarketingHero } from '@/components/Marketing/MarketingHero'
+import { MarketingShell } from '@/components/Marketing/MarketingShell'
+import { BlogCard } from '@/components/Marketing/BlogCard'
+import Link from 'next/link'
+import { SUPPORTED_LOCALES, isValidLocale, getAlternates } from '@/i18n/config'
+import type { Locale } from '@/i18n/types'
+import { getTranslations } from '@/i18n'
+
+interface PageProps {
+ params: Promise<{ locale: string; cat: string }>
+}
+
+export async function generateStaticParams() {
+ if (process.env.NODE_ENV === 'production') return []
+ return SUPPORTED_LOCALES.flatMap((locale) => {
+ // Use English categories as fallback
+ const cats = getAllCategories(locale as Locale)
+ const fallbackCats = cats.length > 0 ? cats : getAllCategories('en')
+ return fallbackCats.map((cat) => ({ locale, cat }))
+ })
+}
+export const dynamicParams = false
+
+export async function generateMetadata({ params }: PageProps): Promise {
+ const { locale, cat } = await params
+ if (!isValidLocale(locale)) return {}
+
+ const label = cat.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+
+ return {
+ ...metadataHelper({
+ title: `${label} — Blog | Peanut`,
+ description: label,
+ canonical: `/${locale}/blog/category/${cat}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/blog/category/${cat}`,
+ languages: getAlternates('blog', `category/${cat}`),
+ },
+ }
+}
+
+export default async function BlogCategoryPageLocalized({ params }: PageProps) {
+ const { locale, cat } = await params
+ if (!isValidLocale(locale)) notFound()
+
+ const typedLocale = locale as Locale
+ const i18n = getTranslations(typedLocale)
+
+ let posts = getPostsByCategory(cat, typedLocale)
+ if (posts.length === 0) posts = getPostsByCategory(cat, 'en')
+ if (posts.length === 0) notFound()
+
+ const label = cat.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+ const categories = getAllCategories(typedLocale).length > 0 ? getAllCategories(typedLocale) : getAllCategories('en')
+
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/blog/page.tsx b/src/app/[locale]/(marketing)/blog/page.tsx
new file mode 100644
index 000000000..e30220e20
--- /dev/null
+++ b/src/app/[locale]/(marketing)/blog/page.tsx
@@ -0,0 +1,98 @@
+import { notFound } from 'next/navigation'
+import { type Metadata } from 'next'
+import { generateMetadata as metadataHelper } from '@/app/metadata'
+import { getAllPosts, getAllCategories } from '@/lib/blog'
+import { MarketingHero } from '@/components/Marketing/MarketingHero'
+import { MarketingShell } from '@/components/Marketing/MarketingShell'
+import { BlogCard } from '@/components/Marketing/BlogCard'
+import Link from 'next/link'
+import { SUPPORTED_LOCALES, getAlternates, isValidLocale } from '@/i18n/config'
+import type { Locale } from '@/i18n/types'
+import { getTranslations } from '@/i18n'
+
+interface PageProps {
+ params: Promise<{ locale: string }>
+}
+
+export async function generateStaticParams() {
+ if (process.env.NODE_ENV === 'production') return []
+ return SUPPORTED_LOCALES.map((locale) => ({ locale }))
+}
+
+export async function generateMetadata({ params }: PageProps): Promise {
+ const { locale } = await params
+ if (!isValidLocale(locale)) return {}
+
+ const i18n = getTranslations(locale as Locale)
+
+ return {
+ ...metadataHelper({
+ title: `${i18n.blog} | Peanut`,
+ description: i18n.allArticles,
+ canonical: `/${locale}/blog`,
+ }),
+ alternates: {
+ canonical: `/${locale}/blog`,
+ languages: getAlternates('blog'),
+ },
+ }
+}
+
+export default async function BlogIndexPageLocalized({ params }: PageProps) {
+ const { locale } = await params
+ if (!isValidLocale(locale)) notFound()
+
+ const typedLocale = locale as Locale
+ const i18n = getTranslations(typedLocale)
+
+ // Try locale-specific posts first, fall back to English
+ let posts = getAllPosts(typedLocale)
+ if (posts.length === 0) posts = getAllPosts('en')
+
+ const categories = getAllCategories(typedLocale)
+
+ return (
+ <>
+
+ {categories.length > 0 && (
+
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/compare/[slug]/page.tsx b/src/app/[locale]/(marketing)/compare/[slug]/page.tsx
new file mode 100644
index 000000000..b595c1199
--- /dev/null
+++ b/src/app/[locale]/(marketing)/compare/[slug]/page.tsx
@@ -0,0 +1,164 @@
+import { notFound } from 'next/navigation'
+import { type Metadata } from 'next'
+import { generateMetadata as metadataHelper } from '@/app/metadata'
+import { COMPETITORS } from '@/data/seo'
+import { MarketingHero } from '@/components/Marketing/MarketingHero'
+import { MarketingShell } from '@/components/Marketing/MarketingShell'
+import { Section } from '@/components/Marketing/Section'
+import { ComparisonTable } from '@/components/Marketing/ComparisonTable'
+import { FAQSection } from '@/components/Marketing/FAQSection'
+import { JsonLd } from '@/components/Marketing/JsonLd'
+import { SUPPORTED_LOCALES, getAlternates, isValidLocale } from '@/i18n/config'
+import type { Locale } from '@/i18n/types'
+import { getTranslations, t, localizedPath } from '@/i18n'
+import { RelatedPages } from '@/components/Marketing/RelatedPages'
+import { ContentPage } from '@/components/Marketing/ContentPage'
+import { readPageContentLocalized } from '@/lib/content'
+import { renderContent } from '@/lib/mdx'
+
+interface PageProps {
+ params: Promise<{ locale: string; slug: string }>
+}
+
+export async function generateStaticParams() {
+ const slugs = Object.keys(COMPETITORS)
+ return SUPPORTED_LOCALES.flatMap((locale) => slugs.map((slug) => ({ locale, slug: `peanut-vs-${slug}` })))
+}
+export const dynamicParams = false
+
+/** Strip the "peanut-vs-" URL prefix to get the data key. Returns null if prefix missing. */
+function parseSlug(raw: string): string | null {
+ if (!raw.startsWith('peanut-vs-')) return null
+ return raw.slice('peanut-vs-'.length)
+}
+
+export async function generateMetadata({ params }: PageProps): Promise {
+ const { locale, slug: rawSlug } = await params
+ if (!isValidLocale(locale)) return {}
+
+ const slug = parseSlug(rawSlug)
+ if (!slug) return {}
+ const competitor = COMPETITORS[slug]
+ if (!competitor) return {}
+
+ // Try MDX content frontmatter first
+ const mdxContent = readPageContentLocalized<{ title: string; description: string; published?: boolean }>(
+ 'compare',
+ slug,
+ locale
+ )
+ if (mdxContent && mdxContent.frontmatter.published !== false) {
+ return {
+ ...metadataHelper({
+ title: mdxContent.frontmatter.title,
+ description: mdxContent.frontmatter.description,
+ canonical: `/${locale}/compare/peanut-vs-${slug}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/compare/peanut-vs-${slug}`,
+ languages: getAlternates('compare', `peanut-vs-${slug}`),
+ },
+ }
+ }
+
+ // Fallback: i18n-based metadata
+ const year = new Date().getFullYear()
+
+ return {
+ ...metadataHelper({
+ title: `Peanut vs ${competitor.name} ${year} | Peanut`,
+ description: `Peanut vs ${competitor.name}: ${competitor.tagline}`,
+ canonical: `/${locale}/compare/peanut-vs-${slug}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/compare/peanut-vs-${slug}`,
+ languages: getAlternates('compare', `peanut-vs-${slug}`),
+ },
+ }
+}
+
+export default async function ComparisonPageLocalized({ params }: PageProps) {
+ const { locale, slug: rawSlug } = await params
+ if (!isValidLocale(locale)) notFound()
+
+ const slug = parseSlug(rawSlug)
+ if (!slug) notFound()
+ const competitor = COMPETITORS[slug]
+ if (!competitor) notFound()
+
+ // Try MDX content first
+ const mdxSource = readPageContentLocalized('compare', slug, locale)
+ if (mdxSource && mdxSource.frontmatter.published !== false) {
+ const { content } = await renderContent(mdxSource.body)
+ const i18n = getTranslations(locale)
+ return (
+
+ {content}
+
+ )
+ }
+
+ // Fallback: old React-driven page
+ const i18n = getTranslations(locale as Locale)
+ const year = new Date().getFullYear()
+
+ const breadcrumbSchema = {
+ '@context': 'https://schema.org',
+ '@type': 'BreadcrumbList',
+ itemListElement: [
+ { '@type': 'ListItem', position: 1, name: i18n.home, item: 'https://peanut.me' },
+ {
+ '@type': 'ListItem',
+ position: 2,
+ name: `Peanut vs ${competitor.name}`,
+ item: `https://peanut.me/${locale}/compare/peanut-vs-${slug}`,
+ },
+ ],
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+ s !== slug)
+ .slice(0, 5)
+ .map(([s, c]) => ({
+ title: `Peanut vs ${c.name} [${year}]`,
+ href: localizedPath('compare', locale, `peanut-vs-${s}`),
+ }))}
+ />
+
+ {/* Last updated */}
+
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/deposit/[exchange]/page.tsx b/src/app/[locale]/(marketing)/deposit/[exchange]/page.tsx
new file mode 100644
index 000000000..36d004e36
--- /dev/null
+++ b/src/app/[locale]/(marketing)/deposit/[exchange]/page.tsx
@@ -0,0 +1,194 @@
+import { notFound } from 'next/navigation'
+import { type Metadata } from 'next'
+import { generateMetadata as metadataHelper } from '@/app/metadata'
+import { EXCHANGES } from '@/data/seo'
+import { MarketingHero } from '@/components/Marketing/MarketingHero'
+import { MarketingShell } from '@/components/Marketing/MarketingShell'
+import { Section } from '@/components/Marketing/Section'
+import { Steps } from '@/components/Marketing/Steps'
+import { FAQSection } from '@/components/Marketing/FAQSection'
+import { JsonLd } from '@/components/Marketing/JsonLd'
+import { Card } from '@/components/0_Bruddle/Card'
+import { SUPPORTED_LOCALES, getAlternates, isValidLocale } from '@/i18n/config'
+import type { Locale } from '@/i18n/types'
+import { getTranslations, t, localizedPath } from '@/i18n'
+import { RelatedPages } from '@/components/Marketing/RelatedPages'
+import { ContentPage } from '@/components/Marketing/ContentPage'
+import { readPageContentLocalized } from '@/lib/content'
+import { renderContent } from '@/lib/mdx'
+
+interface PageProps {
+ params: Promise<{ locale: string; exchange: string }>
+}
+
+export async function generateStaticParams() {
+ const exchanges = Object.keys(EXCHANGES)
+ return SUPPORTED_LOCALES.flatMap((locale) =>
+ exchanges.map((exchange) => ({ locale, exchange: `from-${exchange}` }))
+ )
+}
+export const dynamicParams = false
+
+/** Strip the "from-" URL prefix to get the data key. Returns null if prefix missing. */
+function parseExchange(raw: string): string | null {
+ if (!raw.startsWith('from-')) return null
+ return raw.slice('from-'.length)
+}
+
+export async function generateMetadata({ params }: PageProps): Promise {
+ const { locale, exchange: rawExchange } = await params
+ if (!isValidLocale(locale)) return {}
+
+ const exchange = parseExchange(rawExchange)
+ if (!exchange) return {}
+ const ex = EXCHANGES[exchange]
+ if (!ex) return {}
+
+ // Try MDX content frontmatter first
+ const mdxContent = readPageContentLocalized<{ title: string; description: string; published?: boolean }>(
+ 'deposit',
+ exchange,
+ locale
+ )
+ if (mdxContent && mdxContent.frontmatter.published !== false) {
+ return {
+ ...metadataHelper({
+ title: mdxContent.frontmatter.title,
+ description: mdxContent.frontmatter.description,
+ canonical: `/${locale}/deposit/from-${exchange}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/deposit/from-${exchange}`,
+ languages: getAlternates('deposit', `from-${exchange}`),
+ },
+ }
+ }
+
+ // Fallback: i18n-based metadata
+ const i18n = getTranslations(locale as Locale)
+
+ return {
+ ...metadataHelper({
+ title: `${t(i18n.depositFrom, { exchange: ex.name })} | Peanut`,
+ description: `${t(i18n.depositFrom, { exchange: ex.name })}. ${i18n.recommendedNetwork}: ${ex.recommendedNetwork}.`,
+ canonical: `/${locale}/deposit/from-${exchange}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/deposit/from-${exchange}`,
+ languages: getAlternates('deposit', `from-${exchange}`),
+ },
+ }
+}
+
+export default async function DepositPageLocalized({ params }: PageProps) {
+ const { locale, exchange: rawExchange } = await params
+ if (!isValidLocale(locale)) notFound()
+
+ const exchange = parseExchange(rawExchange)
+ if (!exchange) notFound()
+ const ex = EXCHANGES[exchange]
+ if (!ex) notFound()
+
+ // Try MDX content first
+ const mdxSource = readPageContentLocalized('deposit', exchange, locale)
+ if (mdxSource && mdxSource.frontmatter.published !== false) {
+ const { content } = await renderContent(mdxSource.body)
+ const i18n = getTranslations(locale)
+ return (
+
+ {content}
+
+ )
+ }
+
+ // Fallback: old React-driven page
+ const i18n = getTranslations(locale as Locale)
+
+ const steps = ex.steps.map((step, i) => ({
+ title: `${i + 1}`,
+ description: step,
+ }))
+
+ const howToSchema = {
+ '@context': 'https://schema.org',
+ '@type': 'HowTo',
+ name: t(i18n.depositFrom, { exchange: ex.name }),
+ inLanguage: locale,
+ step: steps.map((step, i) => ({
+ '@type': 'HowToStep',
+ position: i + 1,
+ name: step.title,
+ text: step.description,
+ })),
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+ {ex.troubleshooting.length > 0 && (
+
+
+ )}
+
+ slug !== exchange)
+ .slice(0, 5)
+ .map(([slug, e]) => ({
+ title: t(i18n.depositFrom, { exchange: e.name }),
+ href: localizedPath('deposit', locale, `from-${slug}`),
+ }))}
+ />
+
+ {/* Last updated */}
+
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/error.tsx b/src/app/[locale]/(marketing)/error.tsx
new file mode 100644
index 000000000..938173d6a
--- /dev/null
+++ b/src/app/[locale]/(marketing)/error.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { useEffect } from 'react'
+import Link from 'next/link'
+
+export default function MarketingError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+ useEffect(() => {
+ console.error(error)
+ }, [error])
+
+ return (
+
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/pay-with/[method]/page.tsx b/src/app/[locale]/(marketing)/pay-with/[method]/page.tsx
new file mode 100644
index 000000000..9fec9dd8a
--- /dev/null
+++ b/src/app/[locale]/(marketing)/pay-with/[method]/page.tsx
@@ -0,0 +1,70 @@
+import { notFound } from 'next/navigation'
+import { type Metadata } from 'next'
+import { generateMetadata as metadataHelper } from '@/app/metadata'
+import { PAYMENT_METHODS, PAYMENT_METHOD_SLUGS } from '@/data/seo'
+import { SUPPORTED_LOCALES, getAlternates, isValidLocale } from '@/i18n/config'
+import { getTranslations } from '@/i18n'
+import { ContentPage } from '@/components/Marketing/ContentPage'
+import { readPageContentLocalized } from '@/lib/content'
+import { renderContent } from '@/lib/mdx'
+
+interface PageProps {
+ params: Promise<{ locale: string; method: string }>
+}
+
+export async function generateStaticParams() {
+ return SUPPORTED_LOCALES.flatMap((locale) => PAYMENT_METHOD_SLUGS.map((method) => ({ locale, method })))
+}
+export const dynamicParams = false
+
+export async function generateMetadata({ params }: PageProps): Promise {
+ const { locale, method } = await params
+ if (!isValidLocale(locale)) return {}
+
+ const pm = PAYMENT_METHODS[method]
+ if (!pm) return {}
+
+ const mdxContent = readPageContentLocalized<{ title: string; description: string; published?: boolean }>(
+ 'pay-with',
+ method,
+ locale
+ )
+ if (!mdxContent || mdxContent.frontmatter.published === false) return {}
+
+ return {
+ ...metadataHelper({
+ title: mdxContent.frontmatter.title,
+ description: mdxContent.frontmatter.description,
+ canonical: `/${locale}/pay-with/${method}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/pay-with/${method}`,
+ languages: getAlternates('pay-with', method),
+ },
+ }
+}
+
+export default async function PayWithPage({ params }: PageProps) {
+ const { locale, method } = await params
+ if (!isValidLocale(locale)) notFound()
+
+ const pm = PAYMENT_METHODS[method]
+ if (!pm) notFound()
+
+ const mdxSource = readPageContentLocalized('pay-with', method, locale)
+ if (!mdxSource || mdxSource.frontmatter.published === false) notFound()
+
+ const { content } = await renderContent(mdxSource.body)
+ const i18n = getTranslations(locale)
+
+ return (
+
+ {content}
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/receive-money-from/[country]/page.tsx b/src/app/[locale]/(marketing)/receive-money-from/[country]/page.tsx
new file mode 100644
index 000000000..e650c1652
--- /dev/null
+++ b/src/app/[locale]/(marketing)/receive-money-from/[country]/page.tsx
@@ -0,0 +1,74 @@
+import { notFound } from 'next/navigation'
+import { type Metadata } from 'next'
+import { generateMetadata as metadataHelper } from '@/app/metadata'
+import { CORRIDORS, getCountryName } from '@/data/seo'
+import { SUPPORTED_LOCALES, getAlternates, isValidLocale } from '@/i18n/config'
+import type { Locale } from '@/i18n/types'
+import { getTranslations, t } from '@/i18n'
+import { ReceiveMoneyContent } from '@/components/Marketing/pages/ReceiveMoneyContent'
+import { ContentPage } from '@/components/Marketing/ContentPage'
+import { readPageContentLocalized } from '@/lib/content'
+import { renderContent } from '@/lib/mdx'
+
+interface PageProps {
+ params: Promise<{ locale: string; country: string }>
+}
+
+/** Unique sending countries */
+function getReceiveSources(): string[] {
+ return [...new Set(CORRIDORS.map((c) => c.from))]
+}
+
+export async function generateStaticParams() {
+ const sources = getReceiveSources()
+ return SUPPORTED_LOCALES.flatMap((locale) => sources.map((country) => ({ locale, country })))
+}
+export const dynamicParams = false
+
+export async function generateMetadata({ params }: PageProps): Promise {
+ const { locale, country } = await params
+ if (!isValidLocale(locale)) return {}
+ if (!getReceiveSources().includes(country)) return {}
+
+ const i18n = getTranslations(locale as Locale)
+ const countryName = getCountryName(country, locale as Locale)
+
+ return {
+ ...metadataHelper({
+ title: `${t(i18n.receiveMoneyFrom, { country: countryName })} | Peanut`,
+ description: t(i18n.receiveMoneyFromDesc, { country: countryName }),
+ canonical: `/${locale}/receive-money-from/${country}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/receive-money-from/${country}`,
+ languages: getAlternates('receive-money-from', country),
+ },
+ }
+}
+
+export default async function ReceiveMoneyPage({ params }: PageProps) {
+ const { locale, country } = await params
+ if (!isValidLocale(locale)) notFound()
+ if (!getReceiveSources().includes(country)) notFound()
+
+ // Try MDX content first (future-proofing — no content files exist yet)
+ const mdxSource = readPageContentLocalized('receive-from', country, locale)
+ if (mdxSource && mdxSource.frontmatter.published !== false) {
+ const { content } = await renderContent(mdxSource.body)
+ const i18n = getTranslations(locale)
+ const countryName = getCountryName(country, locale)
+ return (
+
+ {content}
+
+ )
+ }
+
+ // Fallback: old React-driven page
+ return {
+ const { locale, from, to } = await params
+ if (!isValidLocale(locale)) return {}
+
+ if (!CORRIDORS.some((c) => c.from === from && c.to === to)) return {}
+
+ const mdxContent = readCorridorContentLocalized(to, from, locale)
+ if (!mdxContent || mdxContent.frontmatter.published === false) return {}
+
+ const fm = mdxContent.frontmatter as { title?: string; description?: string }
+ if (!fm.title || !fm.description) return {}
+
+ return {
+ ...metadataHelper({
+ title: fm.title,
+ description: fm.description,
+ canonical: `/${locale}/send-money-from/${from}/to/${to}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/send-money-from/${from}/to/${to}`,
+ languages: getAlternates('send-money-from', `${from}/to/${to}`),
+ },
+ }
+}
+
+export default async function FromToCorridorPage({ params }: PageProps) {
+ const { locale, from, to } = await params
+ if (!isValidLocale(locale)) notFound()
+ if (!CORRIDORS.some((c) => c.from === from && c.to === to)) notFound()
+
+ const mdxSource = readCorridorContentLocalized(to, from, locale)
+ if (!mdxSource || mdxSource.frontmatter.published === false) notFound()
+
+ const { content } = await renderContent(mdxSource.body)
+ const i18n = getTranslations(locale)
+ const fromName = getCountryName(from, locale)
+ const toName = getCountryName(to, locale)
+
+ return (
+
+ {content}
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/send-money-to/[country]/page.tsx b/src/app/[locale]/(marketing)/send-money-to/[country]/page.tsx
new file mode 100644
index 000000000..3e09b2f79
--- /dev/null
+++ b/src/app/[locale]/(marketing)/send-money-to/[country]/page.tsx
@@ -0,0 +1,70 @@
+import { notFound } from 'next/navigation'
+import { type Metadata } from 'next'
+import { generateMetadata as metadataHelper } from '@/app/metadata'
+import { COUNTRIES_SEO, getCountryName } from '@/data/seo'
+import { SUPPORTED_LOCALES, getAlternates, isValidLocale, localizedPath } from '@/i18n/config'
+import type { Locale } from '@/i18n/types'
+import { getTranslations } from '@/i18n'
+import { ContentPage } from '@/components/Marketing/ContentPage'
+import { readPageContentLocalized } from '@/lib/content'
+import { renderContent } from '@/lib/mdx'
+
+interface PageProps {
+ params: Promise<{ locale: string; country: string }>
+}
+
+export async function generateStaticParams() {
+ const countries = Object.keys(COUNTRIES_SEO)
+ return SUPPORTED_LOCALES.flatMap((locale) => countries.map((country) => ({ locale, country })))
+}
+export const dynamicParams = false
+
+export async function generateMetadata({ params }: PageProps): Promise {
+ const { locale, country } = await params
+ if (!isValidLocale(locale)) return {}
+
+ const seo = COUNTRIES_SEO[country]
+ if (!seo) return {}
+
+ const mdxContent = readPageContentLocalized<{ title: string; description: string; published?: boolean }>(
+ 'send-to',
+ country,
+ locale
+ )
+ if (!mdxContent || mdxContent.frontmatter.published === false) return {}
+
+ return {
+ ...metadataHelper({
+ title: mdxContent.frontmatter.title,
+ description: mdxContent.frontmatter.description,
+ canonical: `/${locale}/send-money-to/${country}`,
+ }),
+ alternates: {
+ canonical: `/${locale}/send-money-to/${country}`,
+ languages: getAlternates('send-money-to', country),
+ },
+ }
+}
+
+export default async function SendMoneyToCountryPageLocalized({ params }: PageProps) {
+ const { locale, country } = await params
+ if (!isValidLocale(locale)) notFound()
+
+ const mdxSource = readPageContentLocalized('send-to', country, locale)
+ if (!mdxSource || mdxSource.frontmatter.published === false) notFound()
+
+ const { content } = await renderContent(mdxSource.body)
+ const i18n = getTranslations(locale)
+ const countryName = getCountryName(country, locale)
+
+ return (
+
+ {content}
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/team/page.tsx b/src/app/[locale]/(marketing)/team/page.tsx
new file mode 100644
index 000000000..5f523c846
--- /dev/null
+++ b/src/app/[locale]/(marketing)/team/page.tsx
@@ -0,0 +1,128 @@
+import { notFound } from 'next/navigation'
+import { type Metadata } from 'next'
+import { generateMetadata as metadataHelper } from '@/app/metadata'
+import { TEAM_MEMBERS } from '@/data/team'
+import { MarketingHero } from '@/components/Marketing/MarketingHero'
+import { MarketingShell } from '@/components/Marketing/MarketingShell'
+import { JsonLd } from '@/components/Marketing/JsonLd'
+import { Card } from '@/components/0_Bruddle/Card'
+import { SUPPORTED_LOCALES, getAlternates, isValidLocale } from '@/i18n/config'
+import type { Locale } from '@/i18n/types'
+import { getTranslations } from '@/i18n'
+
+interface PageProps {
+ params: Promise<{ locale: string }>
+}
+
+export async function generateStaticParams() {
+ if (process.env.NODE_ENV === 'production') return []
+ return SUPPORTED_LOCALES.map((locale) => ({ locale }))
+}
+
+export async function generateMetadata({ params }: PageProps): Promise {
+ const { locale } = await params
+ if (!isValidLocale(locale)) return {}
+
+ const i18n = getTranslations(locale as Locale)
+
+ return {
+ ...metadataHelper({
+ title: `${i18n.teamTitle} | Peanut`,
+ description: i18n.teamSubtitle,
+ canonical: `/${locale}/team`,
+ }),
+ alternates: {
+ canonical: `/${locale}/team`,
+ languages: getAlternates('team'),
+ },
+ }
+}
+
+export default async function TeamPage({ params }: PageProps) {
+ const { locale } = await params
+ if (!isValidLocale(locale)) notFound()
+
+ const i18n = getTranslations(locale as Locale)
+
+ const orgSchema = {
+ '@context': 'https://schema.org',
+ '@type': 'Organization',
+ name: 'Peanut',
+ url: 'https://peanut.me',
+ member: TEAM_MEMBERS.map((m) => ({
+ '@type': 'Person',
+ name: m.name,
+ jobTitle: m.role,
+ ...(m.social?.linkedin ? { sameAs: [m.social.linkedin] } : {}),
+ })),
+ }
+
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/src/app/actions/card.ts b/src/app/actions/card.ts
new file mode 100644
index 000000000..b6436ea3d
--- /dev/null
+++ b/src/app/actions/card.ts
@@ -0,0 +1,105 @@
+'use server'
+
+import { PEANUT_API_URL } from '@/constants/general.consts'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { getJWTCookie } from '@/utils/cookie-migration.utils'
+
+const API_KEY = process.env.PEANUT_API_KEY
+if (!API_KEY) {
+ throw new Error('PEANUT_API_KEY environment variable is not set')
+}
+
+export interface CardInfoResponse {
+ hasPurchased: boolean
+ chargeStatus?: string
+ chargeUuid?: string
+ paymentUrl?: string
+ isEligible: boolean
+ eligibilityReason?: string
+ price: number
+ currentTier: number
+ slotsRemaining?: number
+ recentPurchases?: number
+}
+
+export interface CardPurchaseResponse {
+ chargeUuid: string
+ paymentUrl: string
+ price: number
+ // Semantic URL components for direct navigation (avoids extra API call)
+ recipientAddress: string
+ chainId: string
+ tokenAmount: string
+ tokenSymbol: string
+}
+
+export interface CardErrorResponse {
+ error: string
+ message: string
+ chargeUuid?: string
+}
+
+/**
+ * Get card pioneer info for the authenticated user
+ */
+export const getCardInfo = async (): Promise<{ data?: CardInfoResponse; error?: string }> => {
+ const jwtToken = (await getJWTCookie())?.value
+ if (!jwtToken) {
+ return { error: 'Authentication required' }
+ }
+
+ try {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/card`, {
+ method: 'GET',
+ headers: {
+ Authorization: `Bearer ${jwtToken}`,
+ 'api-key': API_KEY,
+ },
+ })
+
+ if (!response.ok) {
+ const errorData = await response.json()
+ return { error: errorData.message || 'Failed to get card info' }
+ }
+
+ const data = await response.json()
+ return { data }
+ } catch (e: any) {
+ return { error: e.message || 'An unexpected error occurred' }
+ }
+}
+
+/**
+ * Initiate card pioneer purchase
+ */
+export const purchaseCard = async (): Promise<{ data?: CardPurchaseResponse; error?: string; errorCode?: string }> => {
+ const jwtToken = (await getJWTCookie())?.value
+ if (!jwtToken) {
+ return { error: 'Authentication required', errorCode: 'NOT_AUTHENTICATED' }
+ }
+
+ try {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/card/purchase`, {
+ method: 'POST',
+ headers: {
+ Authorization: `Bearer ${jwtToken}`,
+ 'api-key': API_KEY,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({}),
+ })
+
+ if (!response.ok) {
+ const errorData: CardErrorResponse = await response.json()
+ return {
+ error: errorData.message || 'Failed to initiate purchase',
+ errorCode: errorData.error,
+ }
+ }
+
+ const data = await response.json()
+ return { data }
+ } catch (e: any) {
+ return { error: e.message || 'An unexpected error occurred' }
+ }
+}
diff --git a/src/app/actions/currency.ts b/src/app/actions/currency.ts
index 7be1c2a88..39a1d84be 100644
--- a/src/app/actions/currency.ts
+++ b/src/app/actions/currency.ts
@@ -12,12 +12,14 @@ export const getCurrencyPrice = async (currencyCode: string): Promise<{ buy: num
if (currencyCode === 'USD') {
buy = 1
sell = 1
- } else if (['EUR', 'MXN'].includes(currencyCode)) {
+ } else if (['EUR', 'MXN', 'GBP'].includes(currencyCode)) {
let accountType: AccountType
if (currencyCode === 'EUR') {
accountType = AccountType.IBAN
} else if (currencyCode === 'MXN') {
accountType = AccountType.CLABE
+ } else if (currencyCode === 'GBP') {
+ accountType = AccountType.GB
} else {
throw new Error('Invalid currency code')
}
diff --git a/src/app/actions/types/users.types.ts b/src/app/actions/types/users.types.ts
index 79811164a..63ca3b0f8 100644
--- a/src/app/actions/types/users.types.ts
+++ b/src/app/actions/types/users.types.ts
@@ -3,6 +3,8 @@ export enum BridgeEndorsementType {
BASE = 'base',
SEPA = 'sepa',
SPEI = 'spei',
+ PIX = 'pix',
+ FASTER_PAYMENTS = 'faster_payments',
}
// this type represents the detailed response from our initiate-kyc endpoint
@@ -24,6 +26,7 @@ export enum BridgeAccountType {
IBAN = 'iban',
US = 'us',
CLABE = 'clabe',
+ GB = 'gb', // uk bank accounts (sort code + account number)
}
// matches the BridgeAccountOwnerType enum on the backend
@@ -53,4 +56,5 @@ export interface AddBankAccountPayload {
}
bic?: string
routingNumber?: string
+ sortCode?: string // uk bank accounts
}
diff --git a/src/app/api/exchange-rate/route.ts b/src/app/api/exchange-rate/route.ts
index 8131a2493..3c061ba43 100644
--- a/src/app/api/exchange-rate/route.ts
+++ b/src/app/api/exchange-rate/route.ts
@@ -42,8 +42,8 @@ export async function GET(request: NextRequest) {
if (
MANTECA_CURRENCIES.has(fromUc) ||
MANTECA_CURRENCIES.has(toUc) ||
- ['EUR', 'MXN'].includes(fromUc) ||
- ['EUR', 'MXN'].includes(toUc)
+ ['EUR', 'MXN', 'GBP'].includes(fromUc) ||
+ ['EUR', 'MXN', 'GBP'].includes(toUc)
) {
const currencyPriceRate = await fetchFromCurrencyPrice(fromUc, toUc)
if (currencyPriceRate !== null) {
@@ -105,8 +105,8 @@ async function getExchangeRate(from: string, to: string): Promise
if (
MANTECA_CURRENCIES.has(from) ||
MANTECA_CURRENCIES.has(to) ||
- ['EUR', 'MXN'].includes(from) ||
- ['EUR', 'MXN'].includes(to)
+ ['EUR', 'MXN', 'GBP'].includes(from) ||
+ ['EUR', 'MXN', 'GBP'].includes(to)
) {
return await fetchFromCurrencyPrice(from, to)
}
@@ -122,7 +122,7 @@ async function getExchangeRate(from: string, to: string): Promise
async function fetchFromCurrencyPrice(from: string, to: string): Promise {
console.log('Fetching from getCurrencyPrice')
try {
- if (from === 'USD' && (MANTECA_CURRENCIES.has(to) || ['EUR', 'MXN'].includes(to))) {
+ if (from === 'USD' && (MANTECA_CURRENCIES.has(to) || ['EUR', 'MXN', 'GBP'].includes(to))) {
// USD → other currency: use sell rate (selling USD to get other currency)
const { sell } = await getCurrencyPrice(to)
if (!isFinite(sell) || sell <= 0) {
@@ -130,7 +130,7 @@ async function fetchFromCurrencyPrice(from: string, to: string): Promise ({
+ cookies: jest.fn(async () => ({
+ get: mockCookieGet,
+ set: mockCookieSet,
+ })),
+}))
+
+// Mock getJWTCookie to use our mock cookie store
+jest.mock('@/utils/cookie-migration.utils', () => ({
+ getJWTCookie: jest.fn(async () => mockCookieGet('jwt-token')),
+}))
+
+const mockFetch = jest.fn()
+jest.mock('@/utils/sentry.utils', () => ({
+ fetchWithSentry: (...args: unknown[]) => mockFetch(...args),
+}))
+
+jest.mock('@/constants/general.consts', () => ({
+ PEANUT_API_URL: 'https://api.test',
+}))
+
+// --- Tests ---
+
+import { GET } from '../route'
+
+function makeRequest() {
+ return new NextRequest('http://localhost/api/peanut/user/get-user-from-cookie')
+}
+
+beforeEach(() => {
+ jest.clearAllMocks()
+ process.env.PEANUT_API_KEY = 'test-api-key'
+})
+
+describe('GET /api/peanut/user/get-user-from-cookie', () => {
+ it('returns 400 when no JWT cookie exists', async () => {
+ mockCookieGet.mockReturnValue(undefined)
+
+ const res = await GET(makeRequest())
+
+ expect(res.status).toBe(400)
+ expect(mockFetch).not.toHaveBeenCalled()
+ })
+
+ it('returns user data and refreshes cookie on successful auth (200)', async () => {
+ mockCookieGet.mockReturnValue({ name: 'jwt-token', value: 'valid-token' })
+ mockFetch.mockResolvedValue({
+ status: 200,
+ json: async () => ({ user: { userId: '123', email: 'test@test.com' } }),
+ })
+
+ const res = await GET(makeRequest())
+ const body = await res.json()
+
+ expect(res.status).toBe(200)
+ expect(body.user.userId).toBe('123')
+
+ // Cookie should be refreshed with 30-day maxAge
+ expect(mockCookieSet).toHaveBeenCalledWith('jwt-token', 'valid-token', {
+ httpOnly: false,
+ secure: false, // NODE_ENV !== 'production' in tests
+ path: '/',
+ sameSite: 'lax',
+ maxAge: 30 * 24 * 60 * 60,
+ })
+ })
+
+ it('clears cookie and sets Clear-Site-Data on 401 (expired JWT)', async () => {
+ mockCookieGet.mockReturnValue({ name: 'jwt-token', value: 'expired-token' })
+ mockFetch.mockResolvedValue({
+ status: 401,
+ })
+
+ const res = await GET(makeRequest())
+
+ expect(res.status).toBe(401)
+
+ // Cookie should be cleared
+ expect(res.headers.get('Set-Cookie')).toBe('jwt-token=; Path=/; Max-Age=0; SameSite=Lax')
+ expect(res.headers.get('Clear-Site-Data')).toBe('"cache"')
+
+ // Cookie should NOT be refreshed
+ expect(mockCookieSet).not.toHaveBeenCalled()
+ })
+
+ it('does NOT refresh cookie on non-200 responses', async () => {
+ mockCookieGet.mockReturnValue({ name: 'jwt-token', value: 'some-token' })
+ mockFetch.mockResolvedValue({
+ status: 500,
+ })
+
+ const res = await GET(makeRequest())
+
+ expect(res.status).toBe(500)
+ expect(mockCookieSet).not.toHaveBeenCalled()
+ })
+
+ it('still returns 200 if cookie refresh fails', async () => {
+ mockCookieGet.mockReturnValue({ name: 'jwt-token', value: 'valid-token' })
+ mockFetch.mockResolvedValue({
+ status: 200,
+ json: async () => ({ user: { userId: '123' } }),
+ })
+ mockCookieSet.mockImplementation(() => {
+ throw new Error('cookies() can only be used in server components')
+ })
+
+ const res = await GET(makeRequest())
+
+ // Should still succeed — cookie refresh is best-effort
+ expect(res.status).toBe(200)
+ const body = await res.json()
+ expect(body.user.userId).toBe('123')
+ })
+})
diff --git a/src/app/api/peanut/user/get-user-from-cookie/route.ts b/src/app/api/peanut/user/get-user-from-cookie/route.ts
index 5e4814ccc..29e7b172c 100644
--- a/src/app/api/peanut/user/get-user-from-cookie/route.ts
+++ b/src/app/api/peanut/user/get-user-from-cookie/route.ts
@@ -1,6 +1,7 @@
import { PEANUT_API_URL } from '@/constants/general.consts'
import { fetchWithSentry } from '@/utils/sentry.utils'
import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
import { getJWTCookie } from '@/utils/cookie-migration.utils'
export async function GET(_request: NextRequest) {
@@ -39,6 +40,23 @@ export async function GET(_request: NextRequest) {
}
const data = await response.json()
+
+ // Refresh cookie expiry only when backend confirms JWT is valid.
+ // This keeps active users logged in indefinitely without refreshing
+ // expired JWTs (which caused infinite loading loops).
+ try {
+ const cookieStore = await cookies()
+ cookieStore.set('jwt-token', token.value, {
+ httpOnly: false,
+ secure: process.env.NODE_ENV === 'production',
+ path: '/',
+ sameSite: 'lax',
+ maxAge: 30 * 24 * 60 * 60, // 30 days
+ })
+ } catch {
+ // cookie refresh is best-effort
+ }
+
return new NextResponse(JSON.stringify(data), {
status: 200,
headers: {
diff --git a/src/app/api/peanut/user/login-user/route.ts b/src/app/api/peanut/user/login-user/route.ts
index dcffd05c5..b81446403 100644
--- a/src/app/api/peanut/user/login-user/route.ts
+++ b/src/app/api/peanut/user/login-user/route.ts
@@ -40,6 +40,7 @@ export async function POST(request: NextRequest) {
secure: process.env.NODE_ENV === 'production',
path: '/',
sameSite: 'lax',
+ maxAge: 30 * 24 * 60 * 60, // 30 days
})
return new NextResponse(JSON.stringify(data), {
diff --git a/src/app/api/peanut/user/register-user/route.ts b/src/app/api/peanut/user/register-user/route.ts
index 87da22491..0b07fac51 100644
--- a/src/app/api/peanut/user/register-user/route.ts
+++ b/src/app/api/peanut/user/register-user/route.ts
@@ -46,6 +46,7 @@ export async function POST(request: NextRequest) {
secure: process.env.NODE_ENV === 'production',
path: '/',
sameSite: 'lax',
+ maxAge: 30 * 24 * 60 * 60, // 30 days
})
return new NextResponse(JSON.stringify(data), {
status: 200,
diff --git a/src/app/api/proxy/[...slug]/route.ts b/src/app/api/proxy/[...slug]/route.ts
index 773951e2f..7eeb41e90 100644
--- a/src/app/api/proxy/[...slug]/route.ts
+++ b/src/app/api/proxy/[...slug]/route.ts
@@ -26,8 +26,6 @@ export async function POST(request: NextRequest) {
})
}
- jsonToPass.apiKey = process.env.PEANUT_API_KEY!
-
const userIp = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip')
const headersToPass = {
'Content-Type': 'application/json',
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 73ec69d1c..da454dad8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,6 +8,7 @@ import { PEANUT_API_URL, BASE_URL } from '@/constants/general.consts'
import { type Metadata } from 'next'
const baseUrl = BASE_URL || 'https://peanut.me'
+const IS_PRODUCTION_DOMAIN = baseUrl === 'https://peanut.me'
export const metadata: Metadata = {
title: 'Peanut - Instant Global P2P Payments in Digital Dollars',
@@ -15,8 +16,11 @@ export const metadata: Metadata = {
'Send and receive money instantly with Peanut - a fast, peer-to-peer payments app powered by digital dollars. Easily transfer funds across borders. Enjoy cheap, instant remittances and cash out to local banks without technical hassle.',
metadataBase: new URL(baseUrl),
icons: { icon: '/favicon.ico' },
+ alternates: { canonical: '/' },
keywords:
'peer-to-peer payments, send money instantly, request money, fast global transfers, remittances, digital dollar transfers, Latin America, Argentina, Brazil, P2P payments, crypto payments, stablecoin, digital dollars',
+ // Block staging/preview deploys from indexing (belt-and-suspenders with robots.ts)
+ robots: IS_PRODUCTION_DOMAIN ? { index: true, follow: true } : { index: false, follow: false },
openGraph: {
type: 'website',
title: 'Peanut - Instant Global P2P Payments in Digital Dollars',
@@ -38,6 +42,51 @@ export const metadata: Metadata = {
applicationName: process.env.NODE_ENV === 'development' ? 'Peanut Dev' : 'Peanut',
}
+// JSON-LD structured data — site-wide schemas (Organization, WebApplication, WebSite)
+// FAQPage schema moved to page.tsx (homepage) where it belongs
+const jsonLd = {
+ '@context': 'https://schema.org',
+ '@graph': [
+ {
+ '@type': 'Organization',
+ '@id': `${baseUrl}/#organization`,
+ name: 'Peanut',
+ url: baseUrl,
+ logo: {
+ '@type': 'ImageObject',
+ url: `${baseUrl}/metadata-img.png`,
+ },
+ sameAs: [
+ 'https://twitter.com/PeanutProtocol',
+ 'https://github.com/peanutprotocol',
+ 'https://www.linkedin.com/company/peanut-trade/',
+ ],
+ },
+ {
+ '@type': 'WebApplication',
+ '@id': `${baseUrl}/#app`,
+ name: 'Peanut',
+ url: baseUrl,
+ applicationCategory: 'FinanceApplication',
+ operatingSystem: 'Web',
+ offers: {
+ '@type': 'Offer',
+ price: '0',
+ priceCurrency: 'USD',
+ },
+ description:
+ 'Send and receive money instantly with Peanut — a fast, peer-to-peer payments app powered by digital dollars.',
+ },
+ {
+ '@type': 'WebSite',
+ '@id': `${baseUrl}/#website`,
+ name: 'Peanut',
+ url: baseUrl,
+ publisher: { '@id': `${baseUrl}/#organization` },
+ },
+ ],
+}
+
const roboto = Roboto_Flex({
subsets: ['latin'],
display: 'swap',
@@ -62,16 +111,19 @@ const sniglet = Sniglet({
const knerdOutline = localFont({
src: '../assets/fonts/knerd-outline.ttf',
variable: '--font-knerd-outline',
+ display: 'swap',
})
const knerdFilled = localFont({
src: '../assets/fonts/knerd-filled.ttf',
variable: '--font-knerd-filled',
+ display: 'swap',
})
const robotoFlexBold = localFont({
src: '../assets/fonts/roboto-flex-bold.ttf',
variable: '--font-roboto-flex-bold',
+ display: 'swap',
})
export const viewport: Viewport = {
@@ -91,6 +143,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
+ {/* JSON-LD structured data */}
+
+
+ {/* AI-readable product description (llms.txt spec) */}
+
+
{/* DNS prefetch for API */}
diff --git a/src/app/lp/card/CardLandingPage.tsx b/src/app/lp/card/CardLandingPage.tsx
new file mode 100644
index 000000000..913f9eb40
--- /dev/null
+++ b/src/app/lp/card/CardLandingPage.tsx
@@ -0,0 +1,865 @@
+'use client'
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import { Button } from '@/components/0_Bruddle/Button'
+import { FAQsPanel } from '@/components/Global/FAQs'
+import PioneerCard3D from '@/components/LandingPage/PioneerCard3D'
+import { Marquee } from '@/components/LandingPage'
+import { useAuth } from '@/context/authContext'
+import { useRouter } from 'next/navigation'
+import { Star, HandThumbsUp } from '@/assets'
+import { useEffect } from 'react'
+import underMaintenanceConfig from '@/config/underMaintenance.config'
+
+const faqQuestions = [
+ {
+ id: '0',
+ question: 'What is Card Pioneers?',
+ answer: 'Card Pioneers is the early-access program for the Peanut Card. Reserve a spot, get priority rollout access, and unlock Pioneer perks like $5 for every friend you refer.',
+ },
+ {
+ id: '1',
+ question: 'How does it work?',
+ answer: '1. Reserve your spot by adding $10 in starter card balance. 2. Share your Peanut invite link. 3. When someone joins Card Pioneers through your invite, you earn $5 instantly, plus rewards every time they spend - forever.',
+ },
+ {
+ id: '2',
+ question: 'Is the $10 refundable?',
+ answer: "Your $10 becomes starter balance when your card launches. If you're found not eligible at launch (for example: your region isn't supported, or you can't complete required verification), you can request a refund.",
+ },
+ {
+ id: '3',
+ question: 'Where is the card available?',
+ answer: "We're rolling out by region in stages: US, Latin America, and Africa. You'll see eligibility details during signup.",
+ },
+ {
+ id: '4',
+ question: "Do I earn from my invites' invites too?",
+ answer: 'Yes! You earn a smaller part for your entire invite tree. So if you invite someone who becomes a power-referrer, you earn from everyone they bring in too.',
+ },
+]
+
+const CardLandingPage = () => {
+ const { user } = useAuth()
+ const router = useRouter()
+ // feature flag: redirect to landing if card pioneers is disabled
+ useEffect(() => {
+ if (underMaintenanceConfig.disableCardPioneers) {
+ router.replace('/')
+ }
+ }, [router])
+
+ if (underMaintenanceConfig.disableCardPioneers) {
+ return null
+ }
+
+ const handleCTA = () => {
+ if (user) {
+ router.push('/card')
+ } else {
+ router.push('/setup?redirect_uri=/card')
+ }
+ }
+
+ // Marquee copy from CARD_coremessaging.md
+ const marqueeProps = {
+ visible: true,
+ message: ['EARLY = EARN', 'BUILD YOUR TREE', 'ONE LINK', 'LIFETIME UPSIDE', '$5 PER INVITE', 'EARN FOREVER'],
+ }
+
+ return (
+ <>
+ {/* Hero Section - Yellow with card */}
+
+
+
+
+
+ {/* How it works - Cream */}
+
+
+
+
+
+ {/* Earn Forever - Cream Background */}
+
+
+
+
+
+ {/* Coverage - Yellow */}
+
+
+
+
+
+ {/* FAQ - Cream */}
+
+
+
+
+
+ {/* Final CTA - Secondary Yellow */}
+
+
+
+
+
+ )
+}
+
+// Floating stars component
+const FloatingStars = () => {
+ const starConfigs = [
+ { className: 'absolute left-12 top-10', delay: 0.2 },
+ { className: 'absolute left-56 top-1/2', delay: 0.2 },
+ { className: 'absolute bottom-20 left-20', delay: 0.2 },
+ { className: 'absolute -top-16 right-20 md:top-10', delay: 0.6 },
+ { className: 'absolute bottom-20 right-44', delay: 0.6 },
+ ]
+
+ return (
+ <>
+ {starConfigs.map((config, index) => (
+
+
+ {num}
+
+
+)
+
+// Reward item component
+const RewardItem = ({ amount, label }: { amount: string; label: string }) => (
+
+
+ {amount}
+
+ {label}
+
+)
+
+export default CardLandingPage
diff --git a/src/app/lp/card/page.tsx b/src/app/lp/card/page.tsx
new file mode 100644
index 000000000..5446cf17c
--- /dev/null
+++ b/src/app/lp/card/page.tsx
@@ -0,0 +1,21 @@
+import { generateMetadata as generateMeta } from '@/app/metadata'
+import { LandingPageShell } from '@/components/LandingPage/LandingPageShell'
+import Footer from '@/components/LandingPage/Footer'
+import CardLandingPage from './CardLandingPage'
+
+export const metadata = generateMeta({
+ title: 'Card Pioneers | Get Early Access to Peanut Card',
+ description:
+ 'Join Card Pioneers for early access to the Peanut Card. Reserve your spot with $10, earn $5 for every friend who joins, and spend your dollars globally.',
+ keywords:
+ 'peanut card, card pioneers, crypto card, digital dollars, global spending, early access, referral rewards, international card',
+})
+
+export default function CardLPPage() {
+ return (
+
+
+ )
+}
diff --git a/src/app/lp/layout.tsx b/src/app/lp/layout.tsx
new file mode 100644
index 000000000..60b9e0126
--- /dev/null
+++ b/src/app/lp/layout.tsx
@@ -0,0 +1,10 @@
+import { type Metadata } from 'next'
+
+// /lp is an alias for the root landing page — canonical points to /
+export const metadata: Metadata = {
+ alternates: { canonical: '/' },
+}
+
+export default function LpLayout({ children }: { children: React.ReactNode }) {
+ return children
+}
diff --git a/src/app/lp/page.tsx b/src/app/lp/page.tsx
new file mode 100644
index 000000000..fe98c7c1e
--- /dev/null
+++ b/src/app/lp/page.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+/**
+ * /lp route - Landing page that is ALWAYS accessible regardless of auth state.
+ * This allows logged-in users to view the marketing landing page.
+ * Uses Layout (client) instead of LandingPageShell since SSR doesn't matter here.
+ */
+
+import Layout from '@/components/Global/Layout'
+import { LandingPageClient } from '@/components/LandingPage/LandingPageClient'
+import Manteca from '@/components/LandingPage/Manteca'
+import { RegulatedRails } from '@/components/LandingPage/RegulatedRails'
+import { YourMoney } from '@/components/LandingPage/yourMoney'
+import { SecurityBuiltIn } from '@/components/LandingPage/securityBuiltIn'
+import { SendInSeconds } from '@/components/LandingPage/sendInSeconds'
+import Footer from '@/components/LandingPage/Footer'
+import { heroConfig, faqData, marqueeMessages } from '@/components/LandingPage/landingPageData'
+
+export default function LPPage() {
+ return (
+
+
+ )
+}
diff --git a/src/app/metadata.ts b/src/app/metadata.ts
index c7aeb73c7..64c4cbb50 100644
--- a/src/app/metadata.ts
+++ b/src/app/metadata.ts
@@ -6,11 +6,14 @@ export function generateMetadata({
description,
image = '/metadata-img.png',
keywords,
+ canonical,
}: {
title: string
description: string
image?: string
keywords?: string
+ /** Canonical URL path (e.g. '/careers') or full URL. Resolved against metadataBase. */
+ canonical?: string
}): Metadata {
return {
title,
@@ -22,7 +25,7 @@ export function generateMetadata({
type: 'website',
title,
description,
- url: BASE_URL,
+ url: canonical ? `${BASE_URL}${canonical}` : BASE_URL,
siteName: 'Peanut',
images: [{ url: image, width: 1200, height: 630, alt: title }],
},
@@ -35,5 +38,6 @@ export function generateMetadata({
site: '@PeanutProtocol',
},
applicationName: process.env.NODE_ENV === 'development' ? 'Peanut Dev' : 'Peanut',
+ ...(canonical ? { alternates: { canonical } } : {}),
}
}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 7a66bb1ad..b8ba35d04 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,19 +1,20 @@
-import Link from 'next/link'
import PageContainer from '@/components/0_Bruddle/PageContainer'
import PEANUTMAN_CRY from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_05.gif'
import Image from 'next/image'
export default function NotFound() {
return (
-
+
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f36aa3352..cbdb5e6c6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,220 +1,34 @@
-'use client'
-
-import Layout from '@/components/Global/Layout'
-import {
- DropLink,
- FAQs,
- Hero,
- Marquee,
- NoFees,
- SecurityBuiltIn,
- SendInSeconds,
- YourMoney,
- RegulatedRails,
-} from '@/components/LandingPage'
-import Footer from '@/components/LandingPage/Footer'
+import { Suspense } from 'react'
+import { LandingPageShell } from '@/components/LandingPage/LandingPageShell'
+import { LandingPageClient } from '@/components/LandingPage/LandingPageClient'
import Manteca from '@/components/LandingPage/Manteca'
-import TweetCarousel from '@/components/LandingPage/TweetCarousel'
-import { useFooterVisibility } from '@/context/footerVisibility'
-import { useEffect, useState, useRef } from 'react'
+import { RegulatedRails } from '@/components/LandingPage/RegulatedRails'
+import { YourMoney } from '@/components/LandingPage/yourMoney'
+import { SecurityBuiltIn } from '@/components/LandingPage/securityBuiltIn'
+import { SendInSeconds } from '@/components/LandingPage/sendInSeconds'
+import Footer from '@/components/LandingPage/Footer'
+import { faqSchema, JsonLd } from '@/lib/seo/schemas'
+import { heroConfig, faqData, marqueeMessages } from '@/components/LandingPage/landingPageData'
export default function LandingPage() {
- const { isFooterVisible } = useFooterVisibility()
- const [buttonVisible, setButtonVisible] = useState(true)
- const [isScrollFrozen, setIsScrollFrozen] = useState(false)
- const [buttonScale, setButtonScale] = useState(1)
- const [animationComplete, setAnimationComplete] = useState(false)
- const [shrinkingPhase, setShrinkingPhase] = useState(false)
- const [hasGrown, setHasGrown] = useState(false)
- const sendInSecondsRef = useRef(null)
- const frozenScrollY = useRef(0)
- const virtualScrollY = useRef(0)
- const previousScrollY = useRef(0)
-
- const hero = {
- heading: 'Peanut',
- marquee: {
- visible: true,
- message: ['No fees', 'Instant', '24/7', 'USD', 'EUR', 'CRYPTO', 'GLOBAL', 'SELF-CUSTODIAL'],
- },
- primaryCta: {
- label: 'SIGN UP',
- href: '/setup',
- subtext: 'currently in waitlist',
- },
- }
-
- const faqs = {
- heading: 'Faqs',
- questions: [
- {
- id: '0',
- question: 'Why Peanut?',
- answer: `It's time to take control of your money. No banks, no borders. Just buttery smooth global money.`,
- },
- {
- id: '1',
- question: 'What is Peanut?',
- answer: 'Peanut is the easiest way to send digital dollars to anyone anywhere. Peanut’s tech is powered by cutting-edge cryptography and the security of biometric user authentication as well as a network of modern and fully licensed banking providers.',
- },
- {
- id: '2',
- question: 'Do I have to KYC?',
- answer: 'No! You can use core functionalities (like sending and receiving money) without KYC. Bank connections, however, trigger a one‑time check handled by Persona, a SOC2 Type 2 certified and GDPR compliant ISO 27001–certified provider used by brands like Square and Robinhood. Your documents remain locked away with Persona, not Peanut, and Peanut only gets a yes/no response, keeping your privacy intact.',
- },
- {
- id: '3',
- question: 'Could a thief drain my wallet if they stole my phone?',
- answer: 'Not without your face or fingerprint. The passkey is sealed in the Secure Enclave of your phone and never exported. It’s secured by NIST‑recommended P‑256 Elliptic Curve cryptography. Defeating that would be tougher than guessing all 10¹⁰¹⁰ combinations of a 30‑character password made of emoji.\n This means your account is yours alone. Neither Peanut nor anyone else can freeze or seize it — because we never hold your keys. Your key never touches our servers; compliance requests only see cryptographic and encrypted signatures. Cracking those signatures would demand more energy than the Sun outputs in a full century.',
- },
- {
- id: '4',
- question: 'What happens to my funds if Peanut’s servers were breached?',
- answer: "Nothing. Your funds sit in your self‑custodied smart account (not on Peanut servers). Every transfer still needs a signature from your biometric passkey, so a server‑side attacker has no way to move a cent without the private key sealed in your device's Secure Enclave. Even if Peanut were offline, you could point any ERC‑4337‑compatible wallet at your smart account and recover access independently.",
- },
- {
- id: '5',
- question: 'How does Peanut make money?',
- answer: 'We plan to charge merchants for accepting Peanut as a payment method, whilst still being much cheaper than VISA and Mastercard. For users, we only charge minimal amounts!',
- },
- {
- id: '6',
- question: 'My question is not here',
- answer: 'Check out our full FAQ page at https://peanutprotocol.notion.site/FAQ-2a4838117579805dad62ff47c9d2eb7a or visit our support page at https://peanut.me/support for more help.',
- },
- ],
- marquee: {
- visible: false,
- message: 'Peanut',
- },
- }
-
- useEffect(() => {
- if (isFooterVisible) {
- setButtonVisible(false)
- } else {
- setButtonVisible(true)
- }
- }, [isFooterVisible])
-
- useEffect(() => {
- const handleScroll = () => {
- if (sendInSecondsRef.current) {
- const targetElement = document.getElementById('sticky-button-target')
- if (!targetElement) return
-
- const targetRect = targetElement.getBoundingClientRect()
- const currentScrollY = window.scrollY
-
- // Check if the sticky button should "freeze" at the target position
- // Calculate where the sticky button currently is (bottom-4 = 16px from bottom)
- const stickyButtonTop = window.innerHeight - 16 - 52 // 16px bottom margin, ~52px button height
- const stickyButtonBottom = window.innerHeight - 16
-
- // Freeze when the target element overlaps with the sticky button position (even lower)
- const shouldFreeze =
- targetRect.top <= stickyButtonBottom - 60 &&
- targetRect.bottom >= stickyButtonTop - 60 &&
- !animationComplete &&
- !shrinkingPhase &&
- !hasGrown
-
- if (shouldFreeze && !isScrollFrozen) {
- // Start freeze - prevent normal scrolling
- setIsScrollFrozen(true)
- frozenScrollY.current = currentScrollY
- virtualScrollY.current = 0
- document.body.style.overflow = 'hidden'
- window.scrollTo(0, frozenScrollY.current)
- } else if (isScrollFrozen && !animationComplete) {
- // During freeze - maintain scroll position
- window.scrollTo(0, frozenScrollY.current)
- } else if (animationComplete && !shrinkingPhase && currentScrollY > frozenScrollY.current + 50) {
- // Start shrinking phase when user scrolls further after animation complete
- setShrinkingPhase(true)
- } else if (shrinkingPhase) {
- // Shrink button back to original size based on scroll distance
- const shrinkDistance = Math.max(0, currentScrollY - (frozenScrollY.current + 50))
- const maxShrinkDistance = 200
- const shrinkProgress = Math.min(1, shrinkDistance / maxShrinkDistance)
- const newScale = 1.5 - shrinkProgress * 0.5 // Scale from 1.5 back to 1
- setButtonScale(Math.max(1, newScale))
- } else if (animationComplete && currentScrollY < frozenScrollY.current - 100) {
- // Reset everything when scrolling back up past the SendInSeconds component
- setAnimationComplete(false)
- setShrinkingPhase(false)
- setButtonScale(1)
- setHasGrown(false)
- }
-
- // Update previous scroll position for direction tracking
- previousScrollY.current = currentScrollY
- }
- }
-
- const handleWheel = (event: WheelEvent) => {
- if (isScrollFrozen && !animationComplete) {
- event.preventDefault()
-
- // Only increase scale when scrolling down (positive deltaY)
- if (event.deltaY > 0) {
- virtualScrollY.current += event.deltaY
-
- // Scale button based on virtual scroll (max scale of 1.5) - requires more scrolling
- const maxVirtualScroll = 500 // Increased from 200 to require more scrolling
- const newScale = Math.min(1.5, 1 + (virtualScrollY.current / maxVirtualScroll) * 0.5)
- setButtonScale(newScale)
-
- // Complete animation when we reach max scale
- if (newScale >= 1.5) {
- setAnimationComplete(true)
- setHasGrown(true)
- document.body.style.overflow = ''
- setIsScrollFrozen(false)
- }
- }
- // When scrolling up (negative deltaY), don't change the scale
- }
- }
-
- window.addEventListener('scroll', handleScroll)
- window.addEventListener('wheel', handleWheel, { passive: false })
- handleScroll() // Check initial state
-
- return () => {
- window.removeEventListener('scroll', handleScroll)
- window.removeEventListener('wheel', handleWheel)
- document.body.style.overflow = '' // Cleanup
- }
- }, [isScrollFrozen, animationComplete, shrinkingPhase, hasGrown])
-
- const marqueeProps = { visible: hero.marquee.visible, message: hero.marquee.message }
+ const faqJsonLd = faqSchema(faqData.questions.map((q) => ({ question: q.question, answer: q.answer })))
return (
-
-
+
+
+
+
)
}
diff --git a/src/app/robots.ts b/src/app/robots.ts
index d9d154d42..9ce741e3f 100644
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@@ -1,27 +1,85 @@
import type { MetadataRoute } from 'next'
import { BASE_URL } from '@/constants/general.consts'
+import { SUPPORTED_LOCALES } from '@/i18n/types'
+
+const IS_PRODUCTION_DOMAIN = BASE_URL === 'https://peanut.me'
export default function robots(): MetadataRoute.Robots {
+ // Block indexing on staging, preview deploys, and non-production domains
+ if (!IS_PRODUCTION_DOMAIN) {
+ return {
+ rules: [{ userAgent: '*', disallow: ['/'] }],
+ }
+ }
+
return {
rules: [
+ // Allow Twitterbot to fetch OG images for link previews
{
userAgent: 'Twitterbot',
allow: ['/api/og'],
disallow: [],
},
+
+ // AI search engine crawlers — explicitly welcome
{
- userAgent: '*',
- allow: ['/', '/about', '/send', '/request/create', '/cashout', '/jobs'],
- disallow: ['/api/', '/sdk/', '/*dashboard', '/*profile'],
- },
- {
- userAgent: 'AhrefsBot',
- crawlDelay: 10,
+ userAgent: [
+ 'GPTBot',
+ 'ChatGPT-User',
+ 'PerplexityBot',
+ 'ClaudeBot',
+ 'Google-Extended',
+ 'Applebot-Extended',
+ ],
+ allow: ['/'],
+ disallow: ['/api/', '/home', '/profile', '/settings', '/setup', '/dev/'],
},
+
+ // Default rules for all crawlers
{
- userAgent: 'SemrushBot',
- crawlDelay: 10,
+ userAgent: '*',
+ allow: [
+ '/',
+ '/careers',
+ '/privacy',
+ '/terms',
+ '/exchange',
+ '/lp/card',
+ // SEO routes (all locale-prefixed)
+ ...SUPPORTED_LOCALES.map((l) => `/${l}/`),
+ ],
+ disallow: [
+ '/api/',
+ '/sdk/',
+ // Auth-gated app routes
+ '/home',
+ '/profile',
+ '/settings',
+ '/send',
+ '/request',
+ '/setup',
+ '/claim',
+ '/pay',
+ '/dev/',
+ '/qr',
+ '/history',
+ '/points',
+ '/invite',
+ '/kyc',
+ '/maintenance',
+ '/quests',
+ '/receipt',
+ '/crisp-proxy',
+ '/card-payment',
+ '/add-money',
+ '/withdraw',
+ ],
},
+
+ // Rate-limit aggressive SEO crawlers
+ { userAgent: 'AhrefsBot', crawlDelay: 10 },
+ { userAgent: 'SemrushBot', crawlDelay: 10 },
+ { userAgent: 'MJ12bot', crawlDelay: 10 },
],
sitemap: `${BASE_URL}/sitemap.xml`,
}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index 22b241b80..5da5b172c 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -1,19 +1,115 @@
import { type MetadataRoute } from 'next'
+import { BASE_URL } from '@/constants/general.consts'
+import { COUNTRIES_SEO, CORRIDORS, COMPETITORS, EXCHANGES, PAYMENT_METHOD_SLUGS } from '@/data/seo'
+import { SUPPORTED_LOCALES } from '@/i18n/config'
+
+// TODO (infra): Set up 301 redirect peanut.to/* → peanut.me/ at Vercel/Cloudflare level
+// TODO (infra): Set up 301 redirect docs.peanut.to/* → peanut.me/help
+// TODO (infra): Update GitHub org, Twitter bio, LinkedIn, npm package.json → peanut.me
+// TODO (infra): Add peanut.me to Google Search Console and submit this sitemap
+// TODO (GA4): Create data filter to exclude trafficheap.com referral traffic
+
+/** Build date used for non-content pages that don't have their own date. */
+const BUILD_DATE = new Date()
async function generateSitemap(): Promise {
- const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://peanut.me'
+ type SitemapEntry = {
+ path: string
+ priority: number
+ changeFrequency: MetadataRoute.Sitemap[number]['changeFrequency']
+ lastModified?: Date
+ }
- const staticPages = ['', '/about', '/jobs']
+ const pages: SitemapEntry[] = [
+ // Homepage
+ { path: '', priority: 1.0, changeFrequency: 'weekly' },
- // generate entries for static pages
- const staticEntries = staticPages.map((page) => ({
- url: `${baseUrl}${page}`,
- lastModified: new Date(),
- changeFrequency: 'weekly' as const,
- priority: 1.0,
- }))
+ // Product pages
+ { path: '/lp/card', priority: 0.9, changeFrequency: 'weekly' },
+
+ // Public pages
+ { path: '/careers', priority: 0.7, changeFrequency: 'monthly' },
+ { path: '/exchange', priority: 0.7, changeFrequency: 'weekly' },
+
+ // Legal
+ { path: '/privacy', priority: 0.5, changeFrequency: 'yearly' },
+ { path: '/terms', priority: 0.5, changeFrequency: 'yearly' },
+ ]
+
+ // --- Programmatic SEO pages (all locales with /{locale}/ prefix) ---
+ for (const locale of SUPPORTED_LOCALES) {
+ const isDefault = locale === 'en'
+ const basePriority = isDefault ? 1.0 : 0.9 // EN gets slightly higher priority
+
+ // Country hub pages
+ for (const country of Object.keys(COUNTRIES_SEO)) {
+ pages.push({ path: `/${locale}/${country}`, priority: 0.9 * basePriority, changeFrequency: 'weekly' })
+ }
+
+ // Send-money-to country pages
+ for (const country of Object.keys(COUNTRIES_SEO)) {
+ pages.push({
+ path: `/${locale}/send-money-to/${country}`,
+ priority: 0.8 * basePriority,
+ changeFrequency: 'weekly',
+ })
+ }
- return staticEntries
+ // From-to corridor pages
+ for (const corridor of CORRIDORS) {
+ pages.push({
+ path: `/${locale}/send-money-from/${corridor.from}/to/${corridor.to}`,
+ priority: 0.85 * basePriority,
+ changeFrequency: 'weekly',
+ })
+ }
+
+ // Receive money pages (unique sending countries from corridors)
+ const receiveSources = [...new Set(CORRIDORS.map((c) => c.from))]
+ for (const source of receiveSources) {
+ pages.push({
+ path: `/${locale}/receive-money-from/${source}`,
+ priority: 0.7 * basePriority,
+ changeFrequency: 'weekly',
+ })
+ }
+
+ // Comparison pages
+ for (const slug of Object.keys(COMPETITORS)) {
+ pages.push({
+ path: `/${locale}/compare/peanut-vs-${slug}`,
+ priority: 0.7 * basePriority,
+ changeFrequency: 'monthly',
+ })
+ }
+
+ // Deposit pages
+ for (const exchange of Object.keys(EXCHANGES)) {
+ pages.push({
+ path: `/${locale}/deposit/from-${exchange}`,
+ priority: 0.7 * basePriority,
+ changeFrequency: 'monthly',
+ })
+ }
+
+ // Pay-with pages
+ for (const method of PAYMENT_METHOD_SLUGS) {
+ pages.push({
+ path: `/${locale}/pay-with/${method}`,
+ priority: 0.7 * basePriority,
+ changeFrequency: 'monthly',
+ })
+ }
+
+ // Blog and team pages excluded from production sitemap (not yet launched)
+ }
+
+ return pages.map((page) => ({
+ url: `${BASE_URL}${page.path}`,
+ lastModified: page.lastModified ?? BUILD_DATE,
+ changeFrequency: page.changeFrequency,
+ priority: page.priority,
+ }))
}
export default generateSitemap
diff --git a/src/app/sw.ts b/src/app/sw.ts
index 22a34cf60..910994044 100644
--- a/src/app/sw.ts
+++ b/src/app/sw.ts
@@ -1,6 +1,6 @@
import { defaultCache } from '@serwist/next/worker'
import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist'
-import { Serwist } from 'serwist'
+import { NetworkOnly, Serwist } from 'serwist'
// This declares the value of `injectionPoint` to TypeScript.
// `injectionPoint` is the string that will be replaced by the
@@ -20,7 +20,15 @@ const serwist = new Serwist({
skipWaiting: true,
clientsClaim: true,
navigationPreload: true,
- runtimeCaching: defaultCache,
+ runtimeCaching: [
+ // Never cache auth/user API responses — stale 401s cause infinite loading loops
+ {
+ matcher: ({ sameOrigin, url: { pathname } }: { sameOrigin: boolean; url: URL }) =>
+ sameOrigin && pathname.startsWith('/api/peanut/user/'),
+ handler: new NetworkOnly(),
+ },
+ ...defaultCache,
+ ],
disableDevLogs: false,
})
diff --git a/src/assets/badges/index.ts b/src/assets/badges/index.ts
index 3c9667660..f75d53628 100644
--- a/src/assets/badges/index.ts
+++ b/src/assets/badges/index.ts
@@ -1,3 +1,5 @@
+// TODO: consolidate these with public/badges - we have duplicate badge systems
+// These tier badges should probably move to public/badges and use CODE_TO_PATH in badge.utils.ts
export { default as TIER_0_BADGE } from './tier0.svg'
export { default as TIER_1_BADGE } from './tier1.svg'
export { default as TIER_2_BADGE } from './tier2.svg'
diff --git a/src/assets/cards/Cart Gradient 10.svg b/src/assets/cards/Cart Gradient 10.svg
new file mode 100644
index 000000000..c4c030cb6
--- /dev/null
+++ b/src/assets/cards/Cart Gradient 10.svg
@@ -0,0 +1,66 @@
+
diff --git a/src/assets/cards/Cart Gradient 4.svg b/src/assets/cards/Cart Gradient 4.svg
new file mode 100644
index 000000000..605eb3a40
--- /dev/null
+++ b/src/assets/cards/Cart Gradient 4.svg
@@ -0,0 +1,132 @@
+
diff --git a/src/assets/cards/Cart Gradient 5.png b/src/assets/cards/Cart Gradient 5.png
new file mode 100644
index 000000000..abd139106
Binary files /dev/null and b/src/assets/cards/Cart Gradient 5.png differ
diff --git a/src/assets/cards/Cart Gradient 9.svg b/src/assets/cards/Cart Gradient 9.svg
new file mode 100644
index 000000000..77a1bf628
--- /dev/null
+++ b/src/assets/cards/Cart Gradient 9.svg
@@ -0,0 +1,70 @@
+
diff --git a/src/assets/cards/index.ts b/src/assets/cards/index.ts
new file mode 100644
index 000000000..1b79ed297
--- /dev/null
+++ b/src/assets/cards/index.ts
@@ -0,0 +1,4 @@
+export { default as CARD_GRADIENT_4 } from './Cart Gradient 4.svg'
+export { default as CARD_GRADIENT_5 } from './Cart Gradient 5.png'
+export { default as CARD_GRADIENT_9 } from './Cart Gradient 9.svg'
+export { default as CARD_GRADIENT_10 } from './Cart Gradient 10.svg'
diff --git a/src/assets/index.ts b/src/assets/index.ts
index 6cadbffb7..9fee1067e 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -1,5 +1,6 @@
export * from './badges'
export * from './bg'
+export * from './cards'
export * from './chains'
export * from './exchanges'
export * from './icons'
diff --git a/src/components/0_Bruddle/BaseInput.tsx b/src/components/0_Bruddle/BaseInput.tsx
index 26ef2f515..d3e271766 100644
--- a/src/components/0_Bruddle/BaseInput.tsx
+++ b/src/components/0_Bruddle/BaseInput.tsx
@@ -29,4 +29,7 @@ const BaseInput = forwardRef(
}
)
+BaseInput.displayName = 'BaseInput'
+
+export { BaseInput }
export default BaseInput
diff --git a/src/components/0_Bruddle/BaseSelect.tsx b/src/components/0_Bruddle/BaseSelect.tsx
index acd8f2f84..13aa05fe7 100644
--- a/src/components/0_Bruddle/BaseSelect.tsx
+++ b/src/components/0_Bruddle/BaseSelect.tsx
@@ -100,4 +100,5 @@ const BaseSelect = forwardRef(
BaseSelect.displayName = 'BaseSelect'
+export { BaseSelect }
export default BaseSelect
diff --git a/src/components/0_Bruddle/Button.tsx b/src/components/0_Bruddle/Button.tsx
index a6604a5a5..a003522d5 100644
--- a/src/components/0_Bruddle/Button.tsx
+++ b/src/components/0_Bruddle/Button.tsx
@@ -1,9 +1,10 @@
'use client'
-import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react'
+import React, { forwardRef, useCallback, useEffect, useRef } from 'react'
import { twMerge } from 'tailwind-merge'
import { Icon, type IconName } from '../Global/Icons/Icon'
import Loading from '../Global/Loading'
import { useHaptic } from 'use-haptic'
+import { useLongPress } from '@/hooks/useLongPress'
export type ButtonVariant =
| 'purple'
@@ -11,15 +12,21 @@ export type ButtonVariant =
| 'stroke'
| 'transparent-light'
| 'transparent-dark'
- | 'green'
- | 'yellow'
| 'transparent'
| 'primary-soft'
-export type ButtonSize = 'small' | 'medium' | 'large' | 'xl' | 'xl-fixed'
+export type ButtonSize = 'small' | 'medium' | 'large'
type ButtonShape = 'default' | 'square'
type ShadowSize = '3' | '4' | '6' | '8'
type ShadowType = 'primary' | 'secondary'
+/**
+ * Primary button component.
+ *
+ * @prop variant - Visual style. 'purple' for primary CTAs, 'stroke' for secondary.
+ * @prop size - Height override. Omit for default h-13 (tallest). 'large' is h-10 (shorter!).
+ * @prop shadowSize - Drop shadow depth. '4' is standard (160+ usages).
+ * @prop longPress - Hold-to-confirm behavior with progress bar animation.
+ */
export interface ButtonProps extends React.ButtonHTMLAttributes {
variant?: ButtonVariant
size?: ButtonSize
@@ -47,8 +54,6 @@ const buttonVariants: Record = {
stroke: 'btn-stroke',
'transparent-light': 'btn-transparent-light',
'transparent-dark': 'btn-transparent-dark',
- green: 'bg-green-1',
- yellow: 'bg-secondary-1',
'primary-soft': 'bg-white',
transparent:
'bg-transparent border-none hover:bg-transparent !active:bg-transparent focus:bg-transparent disabled:bg-transparent disabled:hover:bg-transparent',
@@ -57,9 +62,8 @@ const buttonVariants: Record = {
const buttonSizes: Record = {
small: 'btn-small',
medium: 'btn-medium',
+ /** @deprecated large (h-10) is shorter than default (h-13). Avoid for primary CTAs. */
large: 'btn-large',
- xl: 'btn-xl',
- 'xl-fixed': 'btn-xl-fixed',
}
const buttonShadows: Record> = {
@@ -104,12 +108,7 @@ export const Button = forwardRef(
const buttonRef = (ref as React.RefObject) || localRef
const { triggerHaptic } = useHaptic()
-
- // Long press state
- const [isLongPressed, setIsLongPressed] = useState(false)
- const [pressTimer, setPressTimer] = useState(null)
- const [pressProgress, setPressProgress] = useState(0)
- const [progressInterval, setProgressInterval] = useState(null)
+ const { isLongPressed, pressProgress, handlers: longPressHandlers } = useLongPress(longPress)
useEffect(() => {
if (!buttonRef.current) return
@@ -117,83 +116,9 @@ export const Button = forwardRef(
buttonRef.current.classList.add('notranslate')
}, [])
- // Long press handlers
- const handlePressStart = useCallback(() => {
- if (!longPress) return
-
- longPress.onLongPressStart?.()
- setPressProgress(0)
-
- const duration = longPress.duration || 2000
- const updateInterval = 16 // ~60fps
- const increment = (100 / duration) * updateInterval
-
- // Progress animation
- const progressTimer = setInterval(() => {
- setPressProgress((prev) => {
- const newProgress = prev + increment
- if (newProgress >= 100) {
- clearInterval(progressTimer)
- return 100
- }
- return newProgress
- })
- }, updateInterval)
-
- setProgressInterval(progressTimer)
-
- // Long press completion timer
- const timer = setTimeout(() => {
- setIsLongPressed(true)
- longPress.onLongPress?.()
- clearInterval(progressTimer)
- }, duration)
-
- setPressTimer(timer)
- }, [longPress])
-
- const handlePressEnd = useCallback(() => {
- if (!longPress) return
-
- if (pressTimer) {
- clearTimeout(pressTimer)
- setPressTimer(null)
- }
-
- if (progressInterval) {
- clearInterval(progressInterval)
- setProgressInterval(null)
- }
-
- if (isLongPressed) {
- longPress.onLongPressEnd?.()
- setIsLongPressed(false)
- }
-
- setPressProgress(0)
- }, [longPress, pressTimer, progressInterval, isLongPressed])
-
- const handlePressCancel = useCallback(() => {
- if (!longPress) return
-
- if (pressTimer) {
- clearTimeout(pressTimer)
- setPressTimer(null)
- }
-
- if (progressInterval) {
- clearInterval(progressInterval)
- setProgressInterval(null)
- }
-
- setIsLongPressed(false)
- setPressProgress(0)
- }, [longPress, pressTimer, progressInterval])
-
const handleClick = useCallback(
(e: React.MouseEvent) => {
if (longPress && !isLongPressed) {
- // If long press is enabled but not completed, don't trigger onClick
return
}
@@ -203,21 +128,9 @@ export const Button = forwardRef(
onClick?.(e)
},
- [longPress, isLongPressed, onClick]
+ [longPress, isLongPressed, onClick, disableHaptics, triggerHaptic]
)
- // Cleanup timers on unmount
- useEffect(() => {
- return () => {
- if (pressTimer) {
- clearTimeout(pressTimer)
- }
- if (progressInterval) {
- clearInterval(progressInterval)
- }
- }
- }, [pressTimer, progressInterval])
-
const buttonClasses = twMerge(
`btn w-full flex items-center gap-2 transition-all duration-100 active:translate-x-[3px] active:translate-y-[${shadowSize}px] active:shadow-none notranslate`,
buttonVariants[variant],
@@ -255,12 +168,12 @@ export const Button = forwardRef(
ref={buttonRef}
translate="no"
onClick={handleClick}
- onMouseDown={longPress ? handlePressStart : undefined}
- onMouseUp={longPress ? handlePressEnd : undefined}
- onMouseLeave={longPress ? handlePressCancel : undefined}
- onTouchStart={longPress ? handlePressStart : undefined}
- onTouchEnd={longPress ? handlePressEnd : undefined}
- onTouchCancel={longPress ? handlePressCancel : undefined}
+ onMouseDown={longPress ? longPressHandlers.onMouseDown : undefined}
+ onMouseUp={longPress ? longPressHandlers.onMouseUp : undefined}
+ onMouseLeave={longPress ? longPressHandlers.onMouseLeave : undefined}
+ onTouchStart={longPress ? longPressHandlers.onTouchStart : undefined}
+ onTouchEnd={longPress ? longPressHandlers.onTouchEnd : undefined}
+ onTouchCancel={longPress ? longPressHandlers.onTouchCancel : undefined}
{...props}
>
{/* Progress bar for long press */}
diff --git a/src/components/0_Bruddle/Card.tsx b/src/components/0_Bruddle/Card.tsx
index d42052e6b..c36bbe7bb 100644
--- a/src/components/0_Bruddle/Card.tsx
+++ b/src/components/0_Bruddle/Card.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
import { twMerge } from 'tailwind-merge'
type ShadowSize = '4' | '6' | '8'
@@ -59,7 +58,7 @@ const Description = ({ children, className, ...props }: React.HTMLAttributes) => (
-
= 2
- ? 100
- : Math.pow(
- Math.min(
- 1,
- tierInfo.data.nextTierThreshold > 0
- ? tierInfo.data.totalPoints / tierInfo.data.nextTierThreshold
- : 0
- ),
- 0.6
- ) * 100
- }%`,
- }}
+ {/* de-emphasized tier progress - smaller and flatter */}
+
-
+ Promise.resolve(generateInvitesShareText(inviteLink))}
- title="Share your invite link"
- >
- Share Invite link
-
-
+
+
)}
+
+ {/* Invite Modal */}
+ setIsInviteModalOpen(false)}
+ username={username ?? ''}
+ />
)
diff --git a/src/app/(mobile-ui)/profile/exchange-rate/page.tsx b/src/app/(mobile-ui)/profile/exchange-rate/page.tsx
index 6f1b7a965..4e194b62a 100644
--- a/src/app/(mobile-ui)/profile/exchange-rate/page.tsx
+++ b/src/app/(mobile-ui)/profile/exchange-rate/page.tsx
@@ -7,11 +7,10 @@ import { useWallet } from '@/hooks/wallet/useWallet'
import { printableUsdc } from '@/utils/balance.utils'
import { getExchangeRateWidgetRedirectRoute } from '@/utils/exchangeRateWidget.utils'
import { useRouter } from 'next/navigation'
-import { useEffect } from 'react'
export default function ExchangeRatePage() {
const router = useRouter()
- const { fetchBalance, balance } = useWallet()
+ const { balance } = useWallet()
const handleCtaAction = (sourceCurrency: string, destinationCurrency: string) => {
const formattedBalance = parseFloat(printableUsdc(balance ?? 0n))
@@ -20,11 +19,6 @@ export default function ExchangeRatePage() {
router.push(redirectRoute)
}
- useEffect(() => {
- // Fetch latest balance
- fetchBalance()
- }, [])
-
return (
router.replace('/profile')} />
diff --git a/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx b/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx
index 07c05ca46..295994292 100644
--- a/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx
+++ b/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx
@@ -77,6 +77,9 @@ export default function WithdrawBankPage() {
)
useEffect(() => {
+ // Skip redirects when on success view — clearing state during navigation
+ // would race with router.push('/home') and redirect back to /withdraw
+ if (view === 'SUCCESS') return
if (!amountToWithdraw) {
// If no amount, go back to main page
router.replace('/withdraw')
@@ -84,7 +87,7 @@ export default function WithdrawBankPage() {
// If amount is set but no bank account, go to country method selection
router.replace(`/withdraw/${country}`)
}
- }, [bankAccount, router, amountToWithdraw, country])
+ }, [bankAccount, router, amountToWithdraw, country, view])
const destinationDetails = (account: Account) => {
let countryId: string
@@ -100,6 +103,9 @@ export default function WithdrawBankPage() {
case AccountType.CLABE:
countryId = 'MX'
break
+ case AccountType.GB:
+ countryId = 'GB'
+ break
default:
return {
currency: '',
@@ -124,6 +130,8 @@ export default function WithdrawBankPage() {
return bankAccount.routingNumber?.toUpperCase() ?? 'N/A'
} else if (bankAccount && bankAccount.type === AccountType.CLABE) {
return bankAccount.identifier?.toUpperCase() ?? 'N/A'
+ } else if (bankAccount && bankAccount.type === AccountType.GB) {
+ return bankAccount.sortCode ?? 'N/A'
}
return 'N/A'
@@ -259,11 +267,15 @@ export default function WithdrawBankPage() {
title={fromSendFlow ? 'Send' : 'Withdraw'}
icon={view === 'SUCCESS' ? 'cancel' : undefined}
onPrev={() => {
- setAmountToWithdraw('')
- setSelectedMethod(null)
if (view === 'SUCCESS') {
+ // Navigate first, then reset — otherwise clearing amountToWithdraw
+ // triggers the useEffect redirect to /withdraw, overriding /home
router.push('/home')
+ setAmountToWithdraw('')
+ setSelectedMethod(null)
} else {
+ setAmountToWithdraw('')
+ setSelectedMethod(null)
router.back()
}
}}
@@ -281,8 +293,8 @@ export default function WithdrawBankPage() {
tokenSymbol={PEANUT_WALLET_TOKEN_SYMBOL}
/>
- {/* Warning for non-EUR SEPA countries */}
- {isNonEuroSepa && (
+ {/* Warning for non-EUR SEPA countries (not UK — UK uses Faster Payments with GBP) */}
+ {isNonEuroSepa && bankAccount?.type !== AccountType.GB && (
diff --git a/src/app/(mobile-ui)/withdraw/crypto/page.tsx b/src/app/(mobile-ui)/withdraw/crypto/page.tsx
index 5af73db77..d97db5f86 100644
--- a/src/app/(mobile-ui)/withdraw/crypto/page.tsx
+++ b/src/app/(mobile-ui)/withdraw/crypto/page.tsx
@@ -274,6 +274,7 @@ export default function WithdrawCryptoPage() {
txHash: finalTxHash,
tokenAddress: PEANUT_WALLET_TOKEN,
payerAddress: address as Address,
+ squidQuoteId: xChainRoute?.rawResponse?.route?.quoteId,
})
setTransactionHash(finalTxHash)
@@ -381,8 +382,10 @@ export default function WithdrawCryptoPage() {
return 0
}, [xChainRoute])
- if (!amountToWithdraw) {
+ if (!amountToWithdraw && currentView !== 'STATUS') {
// Redirect to main withdraw page for amount input
+ // Guard against STATUS view: resetWithdrawFlow() clears amountToWithdraw,
+ // which would override the router.push('/home') in handleDone
router.push('/withdraw')
return
+
+
{
showUsernames
/>
- Promise.resolve(generateInvitesShareText(inviteLink))}
- title="Share your invite link"
+
+
+
+ {/* people you invited */}
)
})}
- )}
-
- {invites?.invitees?.length === 0 && (
-
+
-
-
+
{tierInfo?.data.currentTier < 2 && (
- = 2
+ ? 100
+ : Math.pow(
+ Math.min(
+ 1,
+ tierInfo.data.nextTierThreshold > 0
+ ? tierInfo.data.totalPoints /
+ tierInfo.data.nextTierThreshold
+ : 0
+ ),
+ 0.6
+ ) * 100
+ }%`,
+ }}
+ />
+
+ {tierInfo?.data.currentTier < 2 && (
+
-
-
- {user?.invitedBy ? (
- You're at tier {tierInfo?.data.currentTier}.
- {tierInfo?.data.currentTier < 2 ? ( -- {tierInfo.data.pointsToNextTier}{' '} - {tierInfo.data.pointsToNextTier === 1 ? 'point' : 'points'} needed to level up +
+ {formatPoints(tierInfo.data.pointsToNextTier)}{' '} + {tierInfo.data.pointsToNextTier === 1 ? 'point' : 'points'} to next tier
- ) : ( -You've reached the max tier!
)}
- router.push(`/${user.invitedBy}`)}
- className="inline-flex cursor-pointer items-center gap-1 font-bold"
- >
- {user.invitedBy}
-
- )}
- - Do stuff on Peanut and get points. Invite friends and pocket 20% of their points, too. -
-Invite friends with your code
-
-
-
-
+ {/* cash section */}
+ {cashStatus?.success && cashStatus.data && (
+ {`${inviteCode}`}
-
-
+ - {IS_DEV - ? 'Experimental. Enabled for all users in dev mode.' - : 'Experimental. Only available for Seedlings badge holders.'} -
-
+ {user?.invitedBy && (
+ <>
+ router.push(`/${user.invitedBy}`)}
+ className="inline-flex cursor-pointer items-center gap-1 font-bold"
+ >
+ {user.invitedBy}
You earn rewards whenever your friends use Peanut!
+
router.push('/points/invites')}
>
- People you invited
- {invites.invitees?.map((invite: PointsInvite, i: number) => {
+
+ {invites.invitees?.slice(0, 5).map((invite: PointsInvite, i: number) => {
const username = invite.username
const fullName = invite.fullName
const isVerified = invite.kycStatus === 'approved'
- const pointsEarned = Math.floor(invite.totalPoints * 0.2)
+ const pointsEarned = invite.contributedPoints ?? 0
// respect user's showFullName preference for avatar and display name
const displayName = invite.showFullName && fullName ? fullName : username
return (
router.push(`/${username}`)}
className="cursor-pointer"
>
@@ -246,35 +267,43 @@ const PointsPage = () => {
isVerified={isVerified}
/>
- - +{pointsEarned} {pointsEarned === 1 ? 'pt' : 'pts'} -
+
-
- No invites yet
+ ) : ( + <> + {/* if user has no invites: show empty state with modal button */} +
+
+ No invites yet
-- Send your invite link to start earning more rewards -
-+ Send your invite link to start earning more rewards +
+ +{post.frontmatter.title}
+{post.frontmatter.description}
+ +
+
+ {i18n.allArticles}
+
+ {categories.map((c) => (
+
+ {c}
+
+ ))}
+
+
+
+ {posts.map((post) => (
+
+
+
+ {i18n.allArticles}
+
+ {categories.map((cat) => (
+
+ {cat}
+
+ ))}
+
+ )}
+
+ {posts.length > 0 ? (
+
+ {posts.map((post) => (
+
+ ) : (
+ Blog posts coming soon.
+ )} +{competitor.verdict}
++ {t(i18n.lastUpdated, { date: new Date().toISOString().split('T')[0] })} +
+
+ {[
+ { label: i18n.recommendedNetwork, value: ex.recommendedNetwork },
+ { label: i18n.withdrawalFee, value: ex.withdrawalFee },
+ { label: i18n.processingTime, value: ex.processingTime },
+ ].map((item) => (
+
+ {item.label}
+ {item.value}
+
+ ))}
+
+
+ {ex.troubleshooting.map((item, i) => (
+
+
+ ))}
+
+ {item.issue}
+{item.fix}
++ {t(i18n.lastUpdated, { date: new Date().toISOString().split('T')[0] })} +
+
+
+ )
+}
diff --git a/src/app/[locale]/(marketing)/layout.tsx b/src/app/[locale]/(marketing)/layout.tsx
new file mode 100644
index 000000000..a232087b7
--- /dev/null
+++ b/src/app/[locale]/(marketing)/layout.tsx
@@ -0,0 +1,29 @@
+import { notFound } from 'next/navigation'
+import { SUPPORTED_LOCALES } from '@/i18n/types'
+import { isValidLocale } from '@/i18n/config'
+import Footer from '@/components/LandingPage/Footer'
+
+interface LayoutProps {
+ children: React.ReactNode
+ params: Promise<{ locale: string }>
+}
+
+export async function generateStaticParams() {
+ return SUPPORTED_LOCALES.map((locale) => ({ locale }))
+}
+export const dynamicParams = false
+
+export default async function LocalizedMarketingLayout({ children, params }: LayoutProps) {
+ const { locale } = await params
+
+ if (!isValidLocale(locale)) {
+ notFound()
+ }
+
+ return (
+ Something went wrong
++ We had trouble loading this page. Please try again or go back to the homepage. +
+
+
+
+ Go home
+
+
+
+ {TEAM_MEMBERS.map((member) => (
+
+ {member.image ? (
+ 
+ ) : (
+
+ ))}
+
+
+ {member.name.charAt(0)}
+
+ )}
+
+
+ {member.name}
+{member.role}
+{member.bio}
+ {member.social && ( +
+ {member.social.linkedin && (
+
+ LinkedIn
+
+ )}
+ {member.social.twitter && (
+
+ X / Twitter
+
+ )}
+ {member.social.github && (
+
+ GitHub
+
+ )}
+
+ )}
+
+
+
+
+ YOUR DOLLARS.
+
+ EVERYWHERE. +
+
+
+ Pay with the peanut card. Earn with every purchase, yours or your friends.
+
+
+ Self-custodial. Best rates. No hidden fees. +
+
+
+
+
+
+
+
+
+ + EVERYWHERE. +
+
+ Self-custodial. Best rates. No hidden fees. +
+ $10 starter balance = your spot secured +
+
+
+ HOW IT WORKS
+
+
+
+
+
+
+
+
+ {/* Visual - Simplified Invite Visual */}
+
+
+
+ {/* Copy */}
+
+
+ INVITE ONCE.
+
+
+
+
+
+ {/*
+ LAYOUT - Calculated with Python trigonometry
+ Container: 340x380
+
+ L0 (YOU): center (170, 190), 80x80px
+ L1 nodes: 48x48px, 120px from YOU
+ - Top: center (170, 70) - outward angle -90°
+ - Bottom-left: center (70, 310) - outward angle 129.8°
+ - Bottom-right: center (270, 310) - outward angle 50.2°
+
+ L2 nodes: 32x32px, 55px from parent L1 center, fanning at -45°, 0°, +45° from outward direction
+ Top L1 (170,70): (131,31), (170,15), (209,31)
+ Bottom-left L1 (70,310): (75,365), (35,352), (15,315)
+ Bottom-right L1 (270,310): (325,315), (305,352), (265,365)
+ */}
+
+ {/* Connection lines */}
+
+
+ {/* L0: YOU node - center (170,190), top-left (130,150) */}
+
+
+ YOU
+
+
+ {/* +$5 BADGES - at visual midpoint between node edges
+ Top edge: YOU bottom (y=150) to L1 top (y=94) -> visual mid = (150+94)/2 = 122, badge top = 114
+ Bottom edges: at midpoint of line between centers
+ */}
+
+ +$5
+
+
+ +$5
+
+
+ +$5
+
+
+ {/* L1: Top primary - center (170,70), top-left (146,46) */}
+
+
+
+ {/* L1: Bottom-left primary - center (70,310), top-left (46,286) */}
+
+
+
+ {/* L1: Bottom-right primary - center (270,310), top-left (246,286) */}
+
+
+
+ {/* L2 NODES - positioned directly at calculated centers
+ Each node is 32x32, so top-left = center - 16
+ Top L1 (170,70): L2 at (131,31), (170,15), (209,31)
+ Bottom-left L1 (70,310): L2 at (75,365), (35,352), (15,315)
+ Bottom-right L1 (270,310): L2 at (325,315), (305,352), (265,365)
+ */}
+
+ {/* Top L1's children - labels 2px gap from node edge */}
+
+
+
+ +%
+
+
+
+
+
+ +%
+
+
+
+
+
+ +%
+
+
+ {/* Bottom-left L1's children */}
+
+
+
+ +%
+
+
+
+
+
+ +%
+
+
+
+
+
+ +%
+
+
+ {/* Bottom-right L1's children */}
+
+
+
+ +%
+
+
+
+
+
+ +%
+
+
+
+
+
+ +%
+
+
+ INVITE ONCE.
+
+ EARN FOREVER.
+
+
+
+
+
+
+
+
+ ROLLING OUT
+
+ GLOBALLY +
+
+
+ {/* Individual country flags */}
+ {[
+ { name: 'United States', code: 'us' },
+ { name: 'Brazil', code: 'br' },
+ { name: 'Argentina', code: 'ar' },
+ { name: 'Mexico', code: 'mx' },
+ { name: 'Nigeria', code: 'ng' },
+ { name: 'Kenya', code: 'ke' },
+ { name: 'South Africa', code: 'za' },
+ ].map((country, i) => (
+
+
+ ))}
+
+ {/* Region pills without flags */}
+
+ Latin America
+
+
+ Africa
+
+
+ + more
+
+
+
+ + GLOBALLY +
+ Starting with US, Latin America, and Africa +
+ +
+
+ More questions? Visit our{' '}
+
+ support page
+
+
+
+
+
+
+ Early access is open
+
+
+
+ READY TO
+
+ JOIN? +
+
+ $10 reserves your spot. And for every friend you invite, earn forever.
+
+
+
+
+
+ + JOIN? +
{title}
+{desc}
+Not found
Woah there buddy, you're not supposed to be here.
- - Take me home, I'm scared - +Woah there buddy, you're not supposed to be here.
+ {/* Use instead of to force full page load — avoids React error #310 + caused by hook count mismatch between 404 (no mobile-ui layout) and home (with providers) */} + + Take me home, I'm scared +
-
-
-
+ = ({ minimal = false })
)
}
+CloudsBackground.displayName = 'CloudsBackground'
+
+export { CloudsBackground }
export default CloudsBackground
diff --git a/src/components/0_Bruddle/Divider.tsx b/src/components/0_Bruddle/Divider.tsx
index dacc77f8b..508e8f108 100644
--- a/src/components/0_Bruddle/Divider.tsx
+++ b/src/components/0_Bruddle/Divider.tsx
@@ -16,4 +16,7 @@ const Divider = ({ text, className, dividerClassname, textClassname, ...props }:
)
}
+Divider.displayName = 'Divider'
+
+export { Divider }
export default Divider
diff --git a/src/components/0_Bruddle/PageContainer.tsx b/src/components/0_Bruddle/PageContainer.tsx
index d35383e6a..60657d5b5 100644
--- a/src/components/0_Bruddle/PageContainer.tsx
+++ b/src/components/0_Bruddle/PageContainer.tsx
@@ -19,4 +19,7 @@ const PageContainer = (props: PageContainerProps) => {
)
}
+PageContainer.displayName = 'PageContainer'
+
+export { PageContainer }
export default PageContainer
diff --git a/src/components/0_Bruddle/Title.tsx b/src/components/0_Bruddle/Title.tsx
index fd6a45067..9f5df1c13 100644
--- a/src/components/0_Bruddle/Title.tsx
+++ b/src/components/0_Bruddle/Title.tsx
@@ -18,4 +18,7 @@ const Title = ({
)
}
+Title.displayName = 'Title'
+
+export { Title }
export default Title
diff --git a/src/components/AddMoney/UserDetailsForm.tsx b/src/components/AddMoney/UserDetailsForm.tsx
index 01412bb3f..c9a585839 100644
--- a/src/components/AddMoney/UserDetailsForm.tsx
+++ b/src/components/AddMoney/UserDetailsForm.tsx
@@ -1,5 +1,5 @@
'use client'
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import { forwardRef, useEffect, useImperativeHandle } from 'react'
import { useForm, Controller } from 'react-hook-form'
import BaseInput from '@/components/0_Bruddle/BaseInput'
import ErrorAlert from '@/components/Global/ErrorAlert'
@@ -18,8 +18,6 @@ interface UserDetailsFormProps {
export const UserDetailsForm = forwardRef<{ handleSubmit: () => void }, UserDetailsFormProps>(
({ onSubmit, onValidChange, initialData }, ref) => {
- const [submissionError, setSubmissionError] = useState(null)
-
const {
control,
handleSubmit,
@@ -36,13 +34,10 @@ export const UserDetailsForm = forwardRef<{ handleSubmit: () => void }, UserDeta
onValidChange?.(isValid)
}, [isValid, onValidChange])
+ // Note: Submission errors are handled by the parent component
useImperativeHandle(ref, () => ({
handleSubmit: handleSubmit(async (data) => {
- setSubmissionError(null)
- const result = await onSubmit(data)
- if (result?.error) {
- setSubmissionError(result.error)
- }
+ await onSubmit(data)
}),
}))
@@ -81,13 +76,6 @@ export const UserDetailsForm = forwardRef<{ handleSubmit: () => void }, UserDeta
- {submissionError &&
{children}
)
diff --git a/src/components/0_Bruddle/Checkbox.tsx b/src/components/0_Bruddle/Checkbox.tsx
index 0f991cf3a..f38dda4f0 100644
--- a/src/components/0_Bruddle/Checkbox.tsx
+++ b/src/components/0_Bruddle/Checkbox.tsx
@@ -26,4 +26,7 @@ const Checkbox = ({ className, label, value, onChange }: CheckboxProps) => (
)
+Checkbox.displayName = 'Checkbox'
+
+export { Checkbox }
export default Checkbox
diff --git a/src/components/0_Bruddle/CloudsBackground.tsx b/src/components/0_Bruddle/CloudsBackground.tsx
index 1128351a9..58357a927 100644
--- a/src/components/0_Bruddle/CloudsBackground.tsx
+++ b/src/components/0_Bruddle/CloudsBackground.tsx
@@ -227,4 +227,7 @@ const CloudsBackground: React.FCAccount details
+
+ )
+}
+
+export default CardDetailsScreen
diff --git a/src/components/Card/CardGeoScreen.tsx b/src/components/Card/CardGeoScreen.tsx
new file mode 100644
index 000000000..5f177be90
--- /dev/null
+++ b/src/components/Card/CardGeoScreen.tsx
@@ -0,0 +1,155 @@
+'use client'
+
+import { Button } from '@/components/0_Bruddle/Button'
+import NavHeader from '@/components/Global/NavHeader'
+import { Icon } from '@/components/Global/Icons/Icon'
+import Card from '@/components/Global/Card'
+import InfoCard from '@/components/Global/InfoCard'
+import { useRouter } from 'next/navigation'
+import { saveRedirectUrl } from '@/utils/general.utils'
+
+interface CardGeoScreenProps {
+ isEligible: boolean
+ eligibilityReason?: string
+ onContinue: () => void
+ onInitiatePurchase: () => void
+ onBack: () => void
+ purchaseError?: string | null
+}
+
+const CardGeoScreen = ({
+ isEligible,
+ eligibilityReason,
+ onContinue,
+ onInitiatePurchase,
+ onBack,
+ purchaseError,
+}: CardGeoScreenProps) => {
+ const router = useRouter()
+
+ // State 3: KYC approved but couldn't fetch country - show warning but allow proceeding
+ const hasKycButNoCountry = !isEligible && eligibilityReason === 'KYC_APPROVED_NO_COUNTRY'
+
+ // State 1 & 2: No KYC or KYC in progress - show verification prompt
+ // TODO: Replace string matching with structured eligibility codes from backend (e.g., NEEDS_KYC, KYC_IN_PROGRESS)
+ const needsKycVerification =
+ !isEligible &&
+ !hasKycButNoCountry &&
+ (eligibilityReason?.toLowerCase().includes('country information not available') ||
+ eligibilityReason?.toLowerCase().includes('please complete kyc'))
+
+ const handleStartVerification = () => {
+ saveRedirectUrl()
+ // TODO: Path says "europe" but Bridge covers all regions - consider renaming route or using generic path
+ router.push('/profile/identity-verification/europe/bridge')
+ }
+
+ return (
+
+ {/* Peanut mascot background - matches PaymentSuccessView sizing */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* FAQ Link */}
+ + 1. You deposit{' '} + {isDiscounted ? ( + <> + ${originalPrice}{' '} + ${price} + + ) : ( + ${price} + )}{' '} + now to reserve your card + {isDiscounted && ( + (because you're tier {currentTier}) + )} +
++ 2. You'll be first to get your card on April 14th +
++ 3. Once you get your Peanut Card, the ${price} becomes + your starter balance! +
++ 4. Invite people: you get rewarded for every person you + invite, now and forever. +
++ For full conditions,{' '} + + read the FAQ + +
+ + {/* CTA Button */} + +
+
+ )
+}
+
+export default CardGeoScreen
diff --git a/src/components/Card/CardInfoScreen.tsx b/src/components/Card/CardInfoScreen.tsx
new file mode 100644
index 000000000..07bfe5e93
--- /dev/null
+++ b/src/components/Card/CardInfoScreen.tsx
@@ -0,0 +1,189 @@
+'use client'
+
+import { Button } from '@/components/0_Bruddle/Button'
+import NavHeader from '@/components/Global/NavHeader'
+import PioneerCard3D from '@/components/LandingPage/PioneerCard3D'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState, useRef } from 'react'
+
+interface CardInfoScreenProps {
+ onContinue: () => void
+ hasPurchased: boolean
+ slotsRemaining?: number
+ recentPurchases?: number
+}
+
+// Rolling digit component - animates a single digit sliding down using CSS keyframes
+const RollingDigit = ({ digit, duration = 400 }: { digit: string; duration?: number }) => {
+ const [currentDigit, setCurrentDigit] = useState(digit)
+ const [prevDigit, setPrevDigit] = useState
+ {isEligible ? (
+ <>
+ {/* Eligible State */}
+
+
+
+ ) : hasKycButNoCountry ? (
+ <>
+ {/* State 3: KYC approved but couldn't fetch country - show warning but allow proceeding */}
+
+
+
+ {/* Warning banner - country data not synced yet */}
+
+
+
+ {/*
+
+
+
+
+
+
+
+ You're Eligible!
++ Great news! Card Pioneers is available in your region. Continue to see how the + program works. +
+
+
+
+
+ Verification Complete
++ Your identity has been verified. You can proceed with your card reservation. +
+
+
+
+
+ Verification Required
+Card Purchase requires identity verification.
+
+
*/}
+
+ ) : (
+ <>
+ {/* Not Eligible State */}
+ Verification helps us determine your region eligibility.
+
+
+
+
+ Not Available Yet
++ Card Pioneers isn't available in your region yet. We're working hard to expand + coverage. +
+
+
+
+ )}
+
+ {purchaseError && + We'll notify you when we launch in your area. In the meantime, keep using Peanut to earn + points! +
+
+ router.back()} />
+
+
+ )
+}
+
+export default CardInfoScreen
diff --git a/src/components/Card/CardPioneerModal.tsx b/src/components/Card/CardPioneerModal.tsx
new file mode 100644
index 000000000..9e76f1952
--- /dev/null
+++ b/src/components/Card/CardPioneerModal.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/0_Bruddle/Button'
+import BaseModal from '@/components/Global/Modal'
+import PioneerCard3D from '@/components/LandingPage/PioneerCard3D'
+
+const STORAGE_KEY = 'card-pioneer-modal-dismissed'
+const DISMISS_DURATION_DAYS = 3
+
+interface CardPioneerModalProps {
+ hasPurchased: boolean
+}
+
+/**
+ * Popup modal shown to eligible users who haven't purchased Card Pioneer yet.
+ * Shown on app open, can be dismissed by closing the modal (re-shows after X days).
+ */
+const CardPioneerModal = ({ hasPurchased }: CardPioneerModalProps) => {
+ const router = useRouter()
+ const [isVisible, setIsVisible] = useState(false)
+
+ // Check if modal should be shown
+ useEffect(() => {
+ // Don't show if already purchased
+ // Note: Eligibility check happens during the flow (geo screen), not here
+ if (hasPurchased) {
+ return
+ }
+
+ // Check localStorage for dismissal
+ const dismissedAt = localStorage.getItem(STORAGE_KEY)
+ if (dismissedAt) {
+ const dismissedDate = new Date(dismissedAt)
+ const now = new Date()
+ const daysSinceDismissed = (now.getTime() - dismissedDate.getTime()) / (1000 * 60 * 60 * 24)
+
+ if (daysSinceDismissed < DISMISS_DURATION_DAYS) {
+ return
+ }
+ }
+
+ // Show modal with a small delay for better UX
+ const timer = setTimeout(() => {
+ setIsVisible(true)
+ }, 1000)
+
+ return () => clearTimeout(timer)
+ }, [hasPurchased])
+
+ const handleDismiss = () => {
+ localStorage.setItem(STORAGE_KEY, new Date().toISOString())
+ setIsVisible(false)
+ }
+
+ const handleJoinNow = () => {
+ setIsVisible(false)
+ router.push('/card')
+ }
+
+ return (
+
+ {/* Description and FAQ link */}
+
+
+
+
+ {/* Card Hero with 3D effect */}
+ + Get access to the best card in the world. Spend globally at the best rates, and get rewarded for + every spend of you and your friends. +
+ + Have a question? Read the FAQ + +
+
+
+ {/* Slots remaining counter */}
+ {displayValue !== null && (
+
+
+ )}
+
+ {/* CTA Button */}
+ {hasPurchased ? (
+
+ ) : (
+
+ )}
+
+
+ + {recentPurchases && recentPurchases > 0 + ? `${recentPurchases} ${recentPurchases === 1 ? 'person' : 'people'} joined in the last 24h` + : 'Join the pioneers today'} +
+
+ {/* Title */}
+
+ Become a Pioneer
+ + {/* Description */} ++ Join the Peanut Card Pioneers now to earn rewards for every purchase of you and your friends! +
+ + {/* Card Hero - scaled down for popup */} +
+
+
+ {/* CTA */}
+
+
+
+
+
+ )
+}
+
+export default CardPurchaseScreen
diff --git a/src/components/Card/CardSuccessScreen.tsx b/src/components/Card/CardSuccessScreen.tsx
new file mode 100644
index 000000000..bf8c3bd3c
--- /dev/null
+++ b/src/components/Card/CardSuccessScreen.tsx
@@ -0,0 +1,144 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/0_Bruddle/Button'
+import Card from '@/components/Global/Card'
+import { Icon } from '@/components/Global/Icons/Icon'
+import InviteFriendsModal from '@/components/Global/InviteFriendsModal'
+import { SoundPlayer } from '@/components/Global/SoundPlayer'
+import { shootStarConfetti } from '@/utils/confetti'
+import { useAuth } from '@/context/authContext'
+import Image from 'next/image'
+import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif'
+
+interface CardSuccessScreenProps {
+ onViewBadges: () => void
+}
+
+const CardSuccessScreen = ({ onViewBadges }: CardSuccessScreenProps) => {
+ const [showConfetti, setShowConfetti] = useState(false)
+ const [isInviteModalOpen, setIsInviteModalOpen] = useState(false)
+ const { user } = useAuth()
+ const router = useRouter()
+
+ // Trigger star confetti on mount
+ useEffect(() => {
+ if (!showConfetti) {
+ setShowConfetti(true)
+ const duration = 2000
+ const end = Date.now() + duration
+ let cancelled = false
+
+ const frame = () => {
+ if (cancelled) return
+
+ shootStarConfetti({
+ particleCount: 20,
+ origin: { x: 0, y: 0.8 },
+ spread: 55,
+ startVelocity: 30,
+ ticks: 100,
+ })
+ shootStarConfetti({
+ particleCount: 20,
+ origin: { x: 1, y: 0.8 },
+ spread: 55,
+ startVelocity: 30,
+ ticks: 100,
+ })
+
+ if (Date.now() < end) {
+ requestAnimationFrame(frame)
+ }
+ }
+ frame()
+
+ return () => {
+ cancelled = true
+ }
+ }
+ }, [showConfetti])
+
+ return (
+ <>
+
+ {purchaseState === 'idle' && (
+ <>
+
+
+
+ {/* Price Summary */}
+
+
+
+ )}
+
+ {purchaseState === 'creating' && (
+
+
+ )}
+
+ {purchaseState === 'awaiting_payment' && (
+ <>
+
+
+
+
+
+
+
+ )}
+
+ {/* CTA Buttons */}
+ {purchaseState === 'idle' && (
+
+ )}
+
+ {purchaseState === 'error' && (
+
+
+
+
+
+ Confirm Purchase
++ You're about to reserve your Card Pioneer spot for ${price}. This amount will become + your starter balance when the card launches. +
+
+ Pioneer Reservation
+ ${price}
+
+
+
+ Creating Payment...
+Setting up your purchase. Please wait.
+
+
+
+
+ Complete Payment
++ Click below to open the payment page and complete your Pioneer reservation. +
+
+
+
+ )}
+
+ {purchaseState === 'error' && (
+
+
+
+
+ Something Went Wrong
++ {error || 'An error occurred while processing your purchase.'} +
+
+
+
+
+ )}
+
+
+
+
+ {/* Peanut mascot background - matches PaymentSuccessView */}
+
+
+
+ {/* What you unlocked */}
+
+
+
+
+
+ You're a Pioneer!
+Card Reserved
+
+
+
+
+
+
+
+
+
+
+
+ {/* CTAs */}
+
+
+ Pioneer badge added to your profile
+
+
+ Priority access during launch
+
+
+ $5 for every friend who joins
+
+
+ Earn forever on every purchase
+
+
+
+
+ - You've earned {points} {points === 1 ? 'point' : 'points'}! + You've earned {formatPoints(points)} {points === 1 ? 'point' : 'points'}!
+ {children}
+
+ )
+}
diff --git a/src/components/Global/BackendErrorScreen/index.tsx b/src/components/Global/BackendErrorScreen/index.tsx
new file mode 100644
index 000000000..12ad64952
--- /dev/null
+++ b/src/components/Global/BackendErrorScreen/index.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+import { useAuth } from '@/context/authContext'
+import { Button } from '@/components/0_Bruddle/Button'
+
+// inline peanut icon svg to ensure it works without needing to fetch external assets
+const PeanutIcon = ({ className }: { className?: string }) => (
+
+)
+
+/**
+ * full-page error screen shown when backend requests fail after retries
+ * displays peanut logo and options to retry or log out
+ */
+export default function BackendErrorScreen() {
+ const { logoutUser, isLoggingOut } = useAuth()
+
+ const handleRetry = () => {
+ window.location.reload()
+ }
+
+ const handleForceLogout = () => {
+ // Use skipBackendCall since backend is likely down (that's why we're on this screen)
+ logoutUser({ skipBackendCall: true })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/src/components/Global/Banner/index.tsx b/src/components/Global/Banner/index.tsx
index 1204c9b1e..0330cac21 100644
--- a/src/components/Global/Banner/index.tsx
+++ b/src/components/Global/Banner/index.tsx
@@ -18,8 +18,9 @@ export function Banner() {
return
+
+
+
+ Something went wrong
+We're having trouble connecting to our servers.
+
+
+
+
+
-
+
(null)
+ const { setIsFooterVisible } = useFooterVisibility()
+
+ useEffect(() => {
+ const el = footerRef.current
+ if (!el) return
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ setIsFooterVisible(entry.isIntersecting)
+ })
+ },
+ { root: null, rootMargin: '0px', threshold: 0.1 }
+ )
+
+ observer.observe(el)
+
+ return () => {
+ observer.unobserve(el)
+ }
+ }, [setIsFooterVisible])
+
+ return
+}
diff --git a/src/components/Global/Icons/Icon.tsx b/src/components/Global/Icons/Icon.tsx
index 4128a277d..faf8bafb9 100644
--- a/src/components/Global/Icons/Icon.tsx
+++ b/src/components/Global/Icons/Icon.tsx
@@ -18,6 +18,7 @@ import {
CurrencyExchangeRounded,
LocalOfferOutlined,
CardGiftcardRounded,
+ CreditCardRounded,
HomeRounded,
SearchRounded,
AccountBalanceWalletRounded,
@@ -150,6 +151,7 @@ export type IconName =
| 'upload-cloud'
| 'alert-filled'
| 'paste'
+ | 'credit-card'
export interface IconProps extends SVGProps {
name: IconName
size?: number | string
@@ -290,6 +292,7 @@ const iconComponents: Record>> =
'invite-heart': InviteHeartIcon,
'alert-filled': (props) => = ({ name, size = 24, width, height, ...props }) => {
diff --git a/src/components/Global/InviteFriendsModal/index.tsx b/src/components/Global/InviteFriendsModal/index.tsx
new file mode 100644
index 000000000..85c45468c
--- /dev/null
+++ b/src/components/Global/InviteFriendsModal/index.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import ActionModal from '@/components/Global/ActionModal'
+import Card from '@/components/Global/Card'
+import CopyToClipboard from '@/components/Global/CopyToClipboard'
+import ShareButton from '@/components/Global/ShareButton'
+import { generateInviteCodeLink, generateInvitesShareText } from '@/utils/general.utils'
+import QRCode from 'react-qr-code'
+
+interface InviteFriendsModalProps {
+ visible: boolean
+ onClose: () => void
+ username: string
+}
+
+/**
+ * Shared modal for inviting friends to Peanut.
+ * Shows QR code, invite code, and share button.
+ *
+ * Used in: CardSuccessScreen, Profile, PointsPage
+ */
+export default function InviteFriendsModal({ visible, onClose, username }: InviteFriendsModalProps) {
+ const { inviteCode, inviteLink } = generateInviteCodeLink(username)
+
+ return (
+
+ {inviteLink && (
+ Promise.resolve(generateInvitesShareText(inviteLink))}
+ title="Share your invite link"
+ >
+ Share Invite Link
+
+
+ }
+ />
+ )
+}
diff --git a/src/components/Global/InvitesGraph/index.tsx b/src/components/Global/InvitesGraph/index.tsx
index 736d19e51..60dfddc9c 100644
--- a/src/components/Global/InvitesGraph/index.tsx
+++ b/src/components/Global/InvitesGraph/index.tsx
@@ -184,7 +184,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
const {
width,
height,
- backgroundColor = '#f9fafb',
+ backgroundColor = '#FAF4F0',
showUsernames: initialShowUsernames = true,
topNodes: initialTopNodes = DEFAULT_TOP_NODES,
activityFilter: initialActivityFilter = DEFAULT_ACTIVITY_FILTER,
@@ -253,6 +253,12 @@ export default function InvitesGraph(props: InvitesGraphProps) {
// topNodes: limit to top N by points (0 = all). Backend-filtered, triggers refetch.
const [topNodes, setTopNodes] = useState(initialTopNodes)
+ // Particle arrival popups for user mode (+1 pt animations)
+ // Map: linkId → { timestamp, x, y, nodeId }
+ const particleArrivalsRef = useRef>(
+ new Map()
+ )
+
// Use passed data in minimal mode, fetched data otherwise
// Note: topNodes filtering is now done by backend, no client-side pruning needed
// Performance mode: frontend filter to top 1000 without refetch
@@ -564,6 +570,17 @@ export default function InvitesGraph(props: InvitesGraphProps) {
return map
}, [filteredGraphData])
+ // Build set of inviter node IDs (nodes that have outgoing invite edges)
+ // Used in minimal/user mode to show heart icon next to inviter usernames
+ const inviterNodes = useMemo(() => {
+ if (!filteredGraphData) return new Set()
+ const set = new Set()
+ filteredGraphData.edges.forEach((edge) => {
+ set.add(edge.source) // source = inviter
+ })
+ return set
+ }, [filteredGraphData])
+
// Build set of node IDs that participate in P2P (for payment mode coloring)
// A node is "P2P active" if it's the source or target of any P2P edge
const p2pActiveNodes = useMemo(() => {
@@ -893,6 +910,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
visibilityConfig,
externalNodesConfig,
p2pActiveNodes,
+ inviterNodes,
})
useEffect(() => {
displaySettingsRef.current = {
@@ -904,6 +922,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
visibilityConfig,
externalNodesConfig,
p2pActiveNodes,
+ inviterNodes,
}
}, [
showUsernames,
@@ -914,6 +933,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
visibilityConfig,
externalNodesConfig,
p2pActiveNodes,
+ inviterNodes,
])
// Helper to determine user activity status
@@ -967,11 +987,11 @@ export default function InvitesGraph(props: InvitesGraphProps) {
// Colors by type
const colors: Record = {
- WALLET: '#f59e0b', // Orange/amber
- BANK: '#3b82f6', // Blue
- MERCHANT: '#10b981', // Green/emerald
+ WALLET: '#FFC900', // secondary-1 (yellow)
+ BANK: '#90A8ED', // secondary-3 (blue)
+ MERCHANT: '#BA8BFF', // primary-4 (purple)
}
- const fillColor = colors[node.externalType] || '#6b7280'
+ const fillColor = colors[node.externalType] || '#9CA3AF'
ctx.globalAlpha = 0.8
ctx.fillStyle = fillColor
@@ -1063,23 +1083,23 @@ export default function InvitesGraph(props: InvitesGraphProps) {
const { p2pActiveNodes: p2pNodes } = displaySettingsRef.current
if (currentMode === 'user') {
- // User mode: all nodes same pleasant purple
- fillColor = 'rgba(139, 92, 246, 0.9)' // Solid purple for all
+ // User mode: all nodes same pink (primary-1 #FF90E8), fully opaque
+ fillColor = 'rgb(255, 144, 232)' // primary-1
} else if (currentMode === 'payment') {
// Payment mode: color by P2P participation (sending or receiving)
const hasP2PActivity = p2pNodes.has(node.id)
fillColor = hasP2PActivity
- ? 'rgba(139, 92, 246, 0.85)' // Purple for P2P active
+ ? 'rgba(255, 144, 232, 0.85)' // primary-1 for P2P active
: 'rgba(156, 163, 175, 0.5)' // Grey for no P2P
} else if (!filter.enabled) {
// No filter - simple active/inactive by access
- fillColor = hasAccess ? 'rgba(139, 92, 246, 0.85)' : 'rgba(156, 163, 175, 0.85)'
+ fillColor = hasAccess ? 'rgba(255, 144, 232, 0.85)' : 'rgba(156, 163, 175, 0.85)'
} else {
// Activity filter enabled - three states
if (activityStatus === 'new') {
- fillColor = 'rgba(16, 185, 129, 0.85)' // Green for new signups
+ fillColor = 'rgba(144, 168, 237, 0.85)' // secondary-3 #90A8ED for new signups
} else if (activityStatus === 'active') {
- fillColor = 'rgba(139, 92, 246, 0.85)' // Purple for active
+ fillColor = 'rgba(255, 144, 232, 0.85)' // primary-1 for active
} else {
// Inactive - exponential time bands with distinct shades
const now = Date.now()
@@ -1120,7 +1140,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
ctx.globalAlpha = 1
if (isSelected) {
// Selected: golden outline
- ctx.strokeStyle = '#fbbf24'
+ ctx.strokeStyle = '#FFC900'
ctx.lineWidth = 3
ctx.stroke()
} else if (!hasAccess) {
@@ -1136,11 +1156,76 @@ export default function InvitesGraph(props: InvitesGraphProps) {
if (showNames && (minimal || globalScale > 1.2)) {
const label = node.username
const fontSize = minimal ? 4 : 12 / globalScale
+ const { inviterNodes: inviterNodesSet } = displaySettingsRef.current
+ const isInviter = inviterNodesSet && inviterNodesSet.has(node.id)
+
ctx.font = `600 ${fontSize}px Inter, system-ui, -apple-system, sans-serif`
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillStyle = activityStatus === 'inactive' && filter.enabled ? 'rgba(17, 24, 39, 0.3)' : '#111827'
- ctx.fillText(label, node.x, node.y + size + fontSize + 2)
+
+ const labelY = node.y + size + fontSize + 2
+
+ // Render username
+ ctx.fillText(label, node.x, labelY)
+
+ // Add heart icon for inviters in minimal/user mode
+ if (minimal && isInviter) {
+ // Measure text to position heart after it
+ const textWidth = ctx.measureText(label).width
+ const heartX = node.x + textWidth / 2 + fontSize * 0.6
+ const heartY = labelY
+ const heartSize = fontSize * 0.7
+
+ // Draw simple heart shape (pink/magenta)
+ ctx.save()
+ ctx.fillStyle = '#FF90E8'
+ ctx.beginPath()
+ // Heart shape using two circles and a triangle
+ const topY = heartY - heartSize * 0.3
+ ctx.arc(heartX - heartSize * 0.25, topY, heartSize * 0.3, 0, Math.PI, true)
+ ctx.arc(heartX + heartSize * 0.25, topY, heartSize * 0.3, 0, Math.PI, true)
+ ctx.lineTo(heartX + heartSize * 0.5, topY)
+ ctx.lineTo(heartX, heartY + heartSize * 0.3)
+ ctx.lineTo(heartX - heartSize * 0.5, topY)
+ ctx.closePath()
+ ctx.fill()
+ ctx.restore()
+ }
+ }
+
+ // Render "+1" popups for particle arrivals in user mode
+ // currentMode is already defined above, reuse it
+ if (currentMode === 'user' && minimal) {
+ const now = performance.now()
+ const popupDuration = 1500 // 1.5 seconds
+ const arrivals = particleArrivalsRef.current
+
+ // Clean up old arrivals and render active ones
+ const toDelete: string[] = []
+ arrivals.forEach((arrival, linkId) => {
+ const age = now - arrival.timestamp
+ if (age > popupDuration) {
+ toDelete.push(linkId)
+ } else {
+ // Render popup with fade-out - start from node center, rise up
+ const progress = age / popupDuration
+ const alpha = 1 - progress
+ const yOffset = -progress * 15 // Rise up 15px from node center
+
+ ctx.save()
+ ctx.globalAlpha = alpha
+ ctx.font = 'bold 5px Inter, system-ui, -apple-system, sans-serif'
+ ctx.fillStyle = '#fbbf24' // Gold color
+ ctx.textAlign = 'center'
+ ctx.textBaseline = 'middle'
+ ctx.fillText('+1 point', arrival.x, arrival.y + yOffset)
+ ctx.restore()
+ }
+ })
+
+ // Clean up expired arrivals
+ toDelete.forEach((linkId) => arrivals.delete(linkId))
}
},
[getUserActivityStatus]
@@ -1211,14 +1296,14 @@ export default function InvitesGraph(props: InvitesGraphProps) {
// Get target node type for color
const extType = target.externalType || 'WALLET'
const lineColors: Record = {
- WALLET: 'rgba(245, 158, 11, 0.25)', // Orange
- BANK: 'rgba(59, 130, 246, 0.25)', // Blue
- MERCHANT: 'rgba(16, 185, 129, 0.25)', // Green
+ WALLET: 'rgba(255, 201, 0, 0.25)', // secondary-1
+ BANK: 'rgba(144, 168, 237, 0.25)', // secondary-3
+ MERCHANT: 'rgba(186, 139, 255, 0.25)', // primary-4
}
const particleColors: Record = {
- WALLET: 'rgba(245, 158, 11, 0.8)', // Orange
- BANK: 'rgba(59, 130, 246, 0.8)', // Blue
- MERCHANT: 'rgba(16, 185, 129, 0.8)', // Green
+ WALLET: 'rgba(255, 201, 0, 0.8)', // secondary-1
+ BANK: 'rgba(144, 168, 237, 0.8)', // secondary-3
+ MERCHANT: 'rgba(186, 139, 255, 0.8)', // primary-4
}
// Convert frequency/volume labels to numeric values for rendering
@@ -1233,7 +1318,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
const lineWidth = Math.min(0.4 + txCount * 0.25, 3.0)
// Draw base line
- ctx.strokeStyle = lineColors[extType] || 'rgba(107, 114, 128, 0.25)'
+ ctx.strokeStyle = lineColors[extType] || 'rgba(156, 163, 175, 0.25)'
ctx.lineWidth = lineWidth
ctx.beginPath()
ctx.moveTo(source.x, source.y)
@@ -1280,7 +1365,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
// P2P: Draw line with animated particles (scaled by activity & volume)
// Supports both full mode (count/totalUsd) and anonymized mode (frequency/volume labels)
const baseAlpha = inactive ? 0.08 : 0.25
- ctx.strokeStyle = `rgba(6, 182, 212, ${baseAlpha})`
+ ctx.strokeStyle = `rgba(144, 168, 237, ${baseAlpha})`
// Convert frequency/volume labels to numeric values for rendering
// Full mode: use actual values; Anonymized mode: map labels to ranges
@@ -1314,7 +1399,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
const particleSize = 1.5 + logUsd * 2.25
const isBidirectional = link.bidirectional === true
- ctx.fillStyle = 'rgba(6, 182, 212, 0.85)'
+ ctx.fillStyle = 'rgba(144, 168, 237, 0.85)'
for (let i = 0; i < particleCount; i++) {
// Forward direction (source → target)
@@ -1339,7 +1424,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
} else {
// Invite: Draw line with multiple arrows along the edge
const isDirect = link.type === 'DIRECT'
- const baseColor = isDirect ? [139, 92, 246] : [236, 72, 153]
+ const baseColor = isDirect ? [255, 144, 232] : [186, 139, 255]
const alpha = inactive ? 0.12 : 0.35
const arrowAlpha = inactive ? 0.2 : 0.6
const { mode: currentMode } = displaySettingsRef.current
@@ -1362,7 +1447,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
const particleSize = 3
// Gold color for points
- ctx.fillStyle = 'rgba(251, 191, 36, 0.9)' // #fbbf24 with alpha
+ ctx.fillStyle = 'rgba(255, 201, 0, 0.9)' // secondary-1 #FFC900 with alpha
for (let i = 0; i < particleCount; i++) {
// Flow direction: source → target (invitee → inviter)
@@ -1372,6 +1457,22 @@ export default function InvitesGraph(props: InvitesGraphProps) {
const t = (time * baseSpeed + i / particleCount) % 1
const px = source.x + (target.x - source.x) * t
const py = source.y + (target.y - source.y) * t
+
+ // Detect arrival: when particle is close to target (t > 0.95)
+ // Track arrival to show "+1 pt" popup
+ if (t > 0.95 && t < 0.99) {
+ const linkId = `${link.source.id}_${link.target.id}_${i}`
+ const arrivals = particleArrivalsRef.current
+ if (!arrivals.has(linkId)) {
+ arrivals.set(linkId, {
+ timestamp: time,
+ x: target.x,
+ y: target.y,
+ nodeId: link.target.id,
+ })
+ }
+ }
+
ctx.beginPath()
ctx.arc(px, py, particleSize, 0, 2 * Math.PI)
ctx.fill()
@@ -1465,7 +1566,13 @@ export default function InvitesGraph(props: InvitesGraphProps) {
return
}
- // User node → Select (camera follows) - click again to open Grafana
+ // User mode: Navigate to user profile in new tab
+ if (isMinimal && node.username) {
+ window.open(`/${node.username}`, '_blank')
+ return
+ }
+
+ // Full/Payment mode: User node → Select (camera follows) - click again to open Grafana
if (selectedUserId === node.id) {
// Already selected - open Grafana
const username = node.username || node.id
@@ -1478,7 +1585,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
setSelectedUserId(node.id)
}
},
- [selectedUserId]
+ [selectedUserId, isMinimal]
)
// Right-click selects the node (camera follows)
@@ -1796,6 +1903,34 @@ export default function InvitesGraph(props: InvitesGraphProps) {
return () => clearTimeout(timeout)
}, [filteredGraphData])
+ // Continuous zoom tracking in minimal mode during simulation settling
+ useEffect(() => {
+ if (!isMinimal || !filteredGraphData || !graphRef.current) return
+
+ let frameId: number | null = null
+ const startTime = Date.now()
+ const trackDuration = 4000 // Track for 4 seconds (simulation should settle by then)
+
+ const continuousZoom = () => {
+ const elapsed = Date.now() - startTime
+ if (elapsed > trackDuration || !graphRef.current) return
+
+ // Zoom to fit every frame during settling - fast animation
+ graphRef.current.zoomToFit(100, 40)
+ frameId = requestAnimationFrame(continuousZoom)
+ }
+
+ // Start tracking immediately after graph mounts
+ const timeout = setTimeout(() => {
+ frameId = requestAnimationFrame(continuousZoom)
+ }, 100)
+
+ return () => {
+ if (frameId) cancelAnimationFrame(frameId)
+ clearTimeout(timeout)
+ }
+ }, [isMinimal, filteredGraphData])
+
// Center on selected node - track continuously as it moves
useEffect(() => {
if (!selectedUserId || !graphRef.current) return
@@ -1998,8 +2133,8 @@ export default function InvitesGraph(props: InvitesGraphProps) {
enableZoomInteraction={true}
cooldownTicks={Infinity}
warmupTicks={0}
- d3AlphaDecay={0.005}
- d3VelocityDecay={0.6}
+ d3AlphaDecay={isMinimal ? 0.03 : 0.005}
+ d3VelocityDecay={isMinimal ? 0.8 : 0.6}
d3AlphaMin={0.001}
onEngineStop={handleEngineStop}
backgroundColor={backgroundColor}
@@ -2346,7 +2481,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
d3VelocityDecay={0.6}
d3AlphaMin={0.001}
onEngineStop={handleEngineStop}
- backgroundColor="#f9fafb"
+ backgroundColor="#FAF4F0"
width={graphWidth}
height={graphHeight}
autoPauseRedraw={false}
diff --git a/src/components/Global/NavHeader/index.tsx b/src/components/Global/NavHeader/index.tsx
index 043c75029..31b80098a 100644
--- a/src/components/Global/NavHeader/index.tsx
+++ b/src/components/Global/NavHeader/index.tsx
@@ -62,7 +62,7 @@ const NavHeader = ({
{showLogoutBtn && (
+
+ )}
+
+
+
+
+ + {inviteCode} +
+