-
Exchange rate
-
- 1 cNGN = {formatCurrency(transaction.exchangeRate, 'NGN')}
-
+ {/* Action Footer (Non-printable) */}
+
+
+
+
+
-
-
Fees paid
-
{formatCurrency(transaction.fees, 'NGN')} (1%)
+
+
+ Receipt automatically sent to: {transaction.email}
+
-
- Total settlement time
- {transaction.totalTime}
+
+
+
+ {/* Bank Statement Match */}
+
+
+
+
+
Check your bank app for:
+
+
+ Credit Alert:{' '}
+
+ {formatCurrency(transaction.amount, 'NGN')}
+
+
+
+ From: AFRAMP TECHNOLOGIES LTD
+
+
+ Reference:{' '}
+ {transaction.reference}
+
+
+
+ If you don't see this, wait 24 hours or{' '}
+
+ Contact Support
+
+
+
- {/* Action Footer (Non-printable) */}
-
-
-
-
- {/* Bank Statement Match */}
-
-
-
-
-
Check your bank app for:
-
-
- Credit Alert:{' '}
-
- {formatCurrency(transaction.amount, 'NGN')}
-
-
-
- From: AFRAMP TECHNOLOGIES LTD
-
-
- Reference:{' '}
- {transaction.reference}
-
-
+ {/* Feedback Section */}
+
+
How was your experience?
+
+ {[1, 2, 3, 4, 5].map((s) => (
+
+ ))}
-
-
- If you don't see this, wait 24 hours or{' '}
-
- Contact Support
-
-
-
-
- {/* What's Next */}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Feedback Section */}
-
-
How was your experience?
-
- {[1, 2, 3, 4, 5].map((s) => (
-
- ))}
-
-
- {rating > 0 && (
-
-
-
- )}
-
+
+
+ )}
+
+
+
)
}
diff --git a/app/page.tsx b/app/page.tsx
index 9abde97..afd0b29 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,7 +5,6 @@ import { LogoMarquee } from '@/components/logo-marquee'
import { BlockchainNetworks } from '@/components/blockchain-networks'
import { BentoGrid } from '@/components/bento-grid'
import { HowItWorks } from '@/components/how-it-works'
-import { Pricing } from '@/components/pricing'
import { FinalCTA } from '@/components/final-cta'
import { Footer } from '@/components/footer'
@@ -19,7 +18,6 @@ export default function Home() {
-
diff --git a/app/receive/page.tsx b/app/receive/page.tsx
new file mode 100644
index 0000000..1e1f684
--- /dev/null
+++ b/app/receive/page.tsx
@@ -0,0 +1,5 @@
+import { ReceivePageClient } from '@/components/receive/receive-page-client'
+
+export default function ReceivePage() {
+ return
+}
diff --git a/app/send/page.tsx b/app/send/page.tsx
new file mode 100644
index 0000000..f1744dc
--- /dev/null
+++ b/app/send/page.tsx
@@ -0,0 +1,5 @@
+import { SendPageClient } from '@/components/send/send-page-client'
+
+export default function SendPage() {
+ return
+}
diff --git a/app/wallet-setup/page.tsx b/app/wallet-setup/page.tsx
new file mode 100644
index 0000000..a668424
--- /dev/null
+++ b/app/wallet-setup/page.tsx
@@ -0,0 +1,45 @@
+import Link from 'next/link'
+import { ArrowLeft, Shield } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export default function WalletSetupPage() {
+ return (
+
+
+
+
+
+
+ Wallet Setup
+
+
+ Secure your wallet in 3 quick steps
+
+
+ Your feature highlights are complete. Next, we will generate and verify your recovery
+ phrase so your funds stay protected.
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/welcome/page.tsx b/app/welcome/page.tsx
new file mode 100644
index 0000000..87d0243
--- /dev/null
+++ b/app/welcome/page.tsx
@@ -0,0 +1,55 @@
+import Link from 'next/link'
+import { ArrowRight, ShieldCheck } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export default function WelcomePage() {
+ return (
+
+
+
+
+
+ FINANCE REDEFINED
+
+
+
+
+ Aframp
+
+ Welcome to the future of finance
+
+
+ Securely manage your digital assets, trade with confidence, and build your wealth with
+ Aframp.
+
+
+
+
+
+
+ )
+}
diff --git a/components/bills/__tests__/category-page.test.tsx b/components/bills/__tests__/category-page.test.tsx
new file mode 100644
index 0000000..8934bd9
--- /dev/null
+++ b/components/bills/__tests__/category-page.test.tsx
@@ -0,0 +1,55 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { CategoryPageClient } from '@/components/bills/category-page-client'
+import '@testing-library/jest-dom'
+
+// Mock the hooks
+jest.mock('@/hooks/use-bills-data', () => ({
+ useBillsData: () => ({
+ categories: [{ id: 'electricity', name: 'Electricity', icon: '⚡' }],
+ recentBillers: [
+ {
+ id: 'aedc',
+ name: 'AEDC',
+ category: 'electricity',
+ description: 'Power provider',
+ logo: '💡',
+ },
+ ],
+ loading: false,
+ }),
+}))
+
+jest.mock('@/hooks/use-wallet-connection', () => ({
+ useWalletConnection: () => ({
+ address: 'GABC...XYZ',
+ connected: true,
+ }),
+}))
+
+describe('CategoryPageClient', () => {
+ it('renders the correct category title', () => {
+ render(
)
+ // Use getAllByText because it appears in header and breadcrumbs, then check the H1 specifically
+ const headings = screen.getAllByText(/Electricity/i)
+ expect(headings[0]).toBeInTheDocument()
+ })
+
+ it('filters billers based on search input', () => {
+ render(
)
+
+ expect(screen.getByText('AEDC')).toBeInTheDocument()
+
+ // Updated to match the actual placeholder: "Search for a provider..."
+ const searchInput = screen.getByPlaceholderText(/Search for a provider/i)
+ fireEvent.change(searchInput, { target: { value: 'NonExistent' } })
+
+ expect(screen.queryByText('AEDC')).not.toBeInTheDocument()
+ })
+
+ it('navigates back to the bills landing page', () => {
+ render(
)
+ // Matches "Back to Categories" instead of just "Back"
+ const backButton = screen.getByRole('link', { name: /back/i })
+ expect(backButton).toHaveAttribute('href', '/bills')
+ })
+})
diff --git a/components/bills/bills-page-client.tsx b/components/bills/bills-page-client.tsx
index fd1c754..d2cd0ef 100644
--- a/components/bills/bills-page-client.tsx
+++ b/components/bills/bills-page-client.tsx
@@ -5,6 +5,8 @@ import { motion } from 'framer-motion'
import Link from 'next/link'
import { ArrowLeft, Search } from 'lucide-react'
import { Button } from '@/components/ui/button'
+import { ThemeToggle } from '@/components/theme-toggle'
+import { useWalletConnection } from '@/hooks/use-wallet-connection'
// Note: Input component will be created separately
import { CountrySelector } from './country-selector'
import { CategoryGrid } from '@/components/bills/category-grid'
@@ -21,6 +23,8 @@ export function BillsPageClient() {
const [selectedCountry, setSelectedCountry] = useState('NG')
const { categories, transactions, recentBillers, scheduledPayments, loading } =
useBillsData(selectedCountry)
+ const { address, connected } = useWalletConnection()
+ const headerAddress = address ? `${address.slice(0, 4)}...${address.slice(-4)}` : ''
// Debounced search
const [debouncedSearch, setDebouncedSearch] = useState(searchQuery)
@@ -54,6 +58,13 @@ export function BillsPageClient() {
+
+ {connected && headerAddress ? (
+
+
+ {headerAddress}
+
+ ) : null}
c.id === categorySlug)
+ const headerAddress = address ? `${address.slice(0, 4)}...${address.slice(-4)}` : ''
+
+ const filteredBillers = useMemo(() => {
+ return recentBillers.filter((biller) => {
+ const matchesCategory = biller.category === categorySlug
+ const matchesSearch =
+ biller.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ biller.description.toLowerCase().includes(searchQuery.toLowerCase())
+ return matchesCategory && matchesSearch
+ })
+ }, [recentBillers, categorySlug, searchQuery])
+
+ return (
+
+
+
+
+
+ Back to Categories
+
+
+
+ {connected && (
+
+
+ {headerAddress}
+
+ )}
+
+
+
+
+
+
+
+
+ {category?.icon || '🧾'}
+
+
+
+ {category?.name || categorySlug}
+
+
+ Fast and secure {category?.name.toLowerCase()} bill payments
+
+
+
+
+
+ setSearchQuery(e.target.value)}
+ />
+
+
+
+ {[1, 2, 3, 4, 5, 6].map((i) => (
+
+ ))}
+
No billers found
+
+ We couldn't find any {category?.name.toLowerCase()} providers matching "
+ {searchQuery}" in this country.
+
+
+
+ )}
+
+ )}
+
+
+
+ {biller.logo}
+
+
+ {biller.trending && (
+
+ Trending
+
+ )}
+ {biller.popular && (
+
+ Popular
+
+ )}
+
+
+ {biller.name}
+
+
+ {biller.description}
+
+
+
+
+
+
+
+ )
+}
diff --git a/components/bills/fee-breakdown.tsx b/components/bills/fee-breakdown.tsx
new file mode 100644
index 0000000..0ed8546
--- /dev/null
+++ b/components/bills/fee-breakdown.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { Info } from 'lucide-react'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+interface FeeBreakdownProps {
+ amount: number
+ baseFee: number
+ percentageFee: number
+ currency?: string
+}
+
+export function FeeBreakdown({
+ amount,
+ baseFee,
+ percentageFee,
+ currency = '₦',
+}: FeeBreakdownProps) {
+ const calcPercentageFee = amount * percentageFee
+ const totalFee = baseFee + calcPercentageFee
+ const totalAmount = amount + totalFee
+
+ return (
+
+
+ Subtotal
+
+ {currency}
+ {amount.toLocaleString()}
+
+
+
+
+
Processing Fee
+
+
+
+
+
+
+
+ Flat fee: {currency}
+ {baseFee}
+
+ {percentageFee > 0 && (
+ Processing: {(percentageFee * 100).toFixed(1)}%
+ )}
+
+
+
+
+
+ {currency}
+ {totalFee.toLocaleString()}
+
+
+
+ Total to Pay
+
+ {currency}
+ {totalAmount.toLocaleString()}
+
+
+
+
+
+ {methods.map((method) => {
+ const isSelected = selected === method.id
+ return (
+
+ )
+ })}
+
+
-
- {biller.logo}
-
-
-
-
-
- {biller.name}
-
- {biller.popular && (
-
- )}
+
+
+
+
+
+ {biller.logo}
-
- {biller.description}
-
+
+
+
+ {biller.name}
+
+ {biller.popular && (
+
+ )}
+
+
+
+ {biller.description}
+
-
-
- {biller.category.replace('-', ' ')}
-
+
+
+ {biller.category.replace('-', ' ')}
+
-
+
+
+ Pay Now
+
+
-
+
+
+
))}
diff --git a/components/dashboard/dashboard-layout.tsx b/components/dashboard/dashboard-layout.tsx
index e3aa16c..c19634a 100644
--- a/components/dashboard/dashboard-layout.tsx
+++ b/components/dashboard/dashboard-layout.tsx
@@ -2,24 +2,20 @@
import { motion } from 'framer-motion'
import Link from 'next/link'
-import { Home, LogOut } from 'lucide-react'
+import { Home } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ThemeToggle } from '@/components/theme-toggle'
import { EthPriceTicker } from '@/components/dashboard/eth-price-ticker'
import { BalanceProvider } from '@/contexts/balance-context'
+import { ConnectButton } from '@/components/Wallet'
+
interface DashboardLayoutProps {
children: React.ReactNode
walletAddress?: string
}
export function DashboardLayout({ children, walletAddress }: DashboardLayoutProps) {
- const handleDisconnect = () => {
- localStorage.removeItem('walletName')
- localStorage.removeItem('walletAddress')
- window.location.href = '/'
- }
-
return (
@@ -41,16 +37,13 @@ export function DashboardLayout({ children, walletAddress }: DashboardLayoutProp
+
-
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 208d4d1..fbd01dc 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -11,7 +11,6 @@ import { ConnectButton } from '@/components/Wallet'
const navItems = [
{ label: 'Features', href: '#features' },
{ label: 'How it Works', href: '#how-it-works' },
- { label: 'Pricing', href: '#pricing' },
]
export function Navbar() {
@@ -72,24 +71,14 @@ export function Navbar() {
+ {/* Right side: Theme Toggle and Connect Button */}
+
-
-
- {/* Mobile Menu Button */}
-
-
+ {/* Mobile Menu Button - inside the right group */}
- {connected && (
+ {isConnected && publicKey && (
)}
diff --git a/components/onboarding/feature-highlights-carousel.tsx b/components/onboarding/feature-highlights-carousel.tsx
new file mode 100644
index 0000000..52de269
--- /dev/null
+++ b/components/onboarding/feature-highlights-carousel.tsx
@@ -0,0 +1,294 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState, type KeyboardEvent } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+import { ArrowLeft, ArrowRight, Globe2, ShieldCheck, Sparkles, Zap } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+export type FeatureHighlightIllustration = 'security' | 'ease' | 'freedom' | 'network'
+
+export interface FeatureHighlightSlide {
+ id: string
+ title: string
+ description: string
+ illustration: FeatureHighlightIllustration
+}
+
+interface FeatureHighlightsCarouselProps {
+ slides?: FeatureHighlightSlide[]
+ onComplete: () => void
+ onSkip?: () => void
+ onBack?: () => void
+ autoAdvanceMs?: number
+ className?: string
+}
+
+const DEFAULT_SLIDES: FeatureHighlightSlide[] = [
+ {
+ id: 'security',
+ title: 'Secure Digital Wallet',
+ description:
+ 'Experience military-grade protection with encrypted storage, multi-factor checks, and recovery safeguards.',
+ illustration: 'security',
+ },
+ {
+ id: 'ease',
+ title: 'Built for Everyday Ease',
+ description:
+ 'Move from sign-up to your first transaction in minutes with guided flows and familiar actions.',
+ illustration: 'ease',
+ },
+ {
+ id: 'freedom',
+ title: 'Trade with Total Freedom',
+ description:
+ 'Buy, sell, and move assets across borders with low friction and real-time settlement confidence.',
+ illustration: 'freedom',
+ },
+ {
+ id: 'network',
+ title: 'Connected Financial Network',
+ description:
+ 'Link local money rails with global digital assets through a trusted, always-on payment network.',
+ illustration: 'network',
+ },
+]
+
+function Illustration({ variant }: { variant: FeatureHighlightIllustration }) {
+ const iconByVariant = {
+ security: ShieldCheck,
+ ease: Sparkles,
+ freedom: ArrowRight,
+ network: Globe2,
+ } as const
+
+ const Icon = iconByVariant[variant]
+
+ return (
+
+
+
+
+
+
+ {variant === 'network' && (
+
+ )}
+
+ {variant === 'freedom' && (
+
+ )}
+
+
+
+
+
+ )
+}
+
+export function FeatureHighlightsCarousel({
+ slides = DEFAULT_SLIDES,
+ onComplete,
+ onSkip,
+ onBack,
+ autoAdvanceMs = 0,
+ className,
+}: FeatureHighlightsCarouselProps) {
+ const [emblaRef, emblaApi] = useEmblaCarousel({ align: 'start', loop: false, dragFree: false })
+ const [selectedIndex, setSelectedIndex] = useState(0)
+
+ const slideCount = slides.length
+ const isLastSlide = selectedIndex === slideCount - 1
+ const currentSlide = slides[selectedIndex]
+
+ const scrollPrev = useCallback(() => {
+ emblaApi?.scrollPrev()
+ }, [emblaApi])
+
+ const scrollNext = useCallback(() => {
+ emblaApi?.scrollNext()
+ }, [emblaApi])
+
+ const scrollTo = useCallback(
+ (index: number) => {
+ emblaApi?.scrollTo(index)
+ },
+ [emblaApi]
+ )
+
+ const selectSlide = useCallback(() => {
+ if (!emblaApi) return
+ setSelectedIndex(emblaApi.selectedScrollSnap())
+ }, [emblaApi])
+
+ useEffect(() => {
+ if (!emblaApi) return
+ emblaApi.on('select', selectSlide)
+ emblaApi.on('reInit', selectSlide)
+ return () => {
+ emblaApi.off('select', selectSlide)
+ emblaApi.off('reInit', selectSlide)
+ }
+ }, [emblaApi, selectSlide])
+
+ useEffect(() => {
+ if (!emblaApi || autoAdvanceMs <= 0) return
+ const timer = window.setInterval(() => {
+ if (emblaApi.selectedScrollSnap() >= slideCount - 1) {
+ window.clearInterval(timer)
+ return
+ }
+ emblaApi.scrollNext()
+ }, autoAdvanceMs)
+ return () => window.clearInterval(timer)
+ }, [autoAdvanceMs, emblaApi, slideCount])
+
+ const handleBack = useCallback(() => {
+ if (selectedIndex > 0) {
+ scrollPrev()
+ return
+ }
+ onBack?.()
+ }, [onBack, scrollPrev, selectedIndex])
+
+ const handleNext = useCallback(() => {
+ if (isLastSlide) {
+ onComplete()
+ return
+ }
+ scrollNext()
+ }, [isLastSlide, onComplete, scrollNext])
+
+ const handleKeyboard = useCallback(
+ (event: KeyboardEvent
) => {
+ if (event.key === 'ArrowLeft') {
+ event.preventDefault()
+ handleBack()
+ }
+ if (event.key === 'ArrowRight') {
+ event.preventDefault()
+ handleNext()
+ }
+ if (event.key === 'Home') {
+ event.preventDefault()
+ scrollTo(0)
+ }
+ if (event.key === 'End') {
+ event.preventDefault()
+ scrollTo(slideCount - 1)
+ }
+ },
+ [handleBack, handleNext, scrollTo, slideCount]
+ )
+
+ const srProgressLabel = useMemo(
+ () => `Slide ${selectedIndex + 1} of ${slideCount}: ${currentSlide?.title ?? ''}`,
+ [currentSlide?.title, selectedIndex, slideCount]
+ )
+
+ return (
+
+
+
+ Feature Highlights
+
+
+
+
+
+ {slides.map((slide, index) => (
+
+
+
+
+ {slide.title}
+
+
{slide.description}
+
+ ))}
+
+
+
+ {slides.map((slide, index) => (
+
+
+
+
+
+
+ {srProgressLabel}
+
+
+ )
+}
+
+export { DEFAULT_SLIDES }
diff --git a/components/onramp/onramp-page-client.tsx b/components/onramp/onramp-page-client.tsx
index 9c9fd0c..9c0c820 100644
--- a/components/onramp/onramp-page-client.tsx
+++ b/components/onramp/onramp-page-client.tsx
@@ -1,10 +1,11 @@
'use client'
-import { useEffect, useMemo, useState, useRef } from 'react'
+import { useEffect, useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
-import { LogOut } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import { ThemeToggle } from '@/components/theme-toggle'
+import { ConnectButton } from '@/components/Wallet'
+import { useWallet } from '@/hooks/useWallet'
import {
Dialog,
DialogContent,
@@ -19,17 +20,19 @@ import { useOnrampForm } from '@/hooks/use-onramp-form'
import { useWalletConnection } from '@/hooks/use-wallet-connection'
import { OnrampTestUtils } from '@/components/onramp/onramp-test-utils'
import type { CryptoAsset, FiatCurrency } from '@/types/onramp'
-import { formatCurrency, truncateAddress } from '@/lib/onramp/formatters'
+import { formatCurrency } from '@/lib/onramp/formatters'
import { isValidStellarAddress } from '@/lib/onramp/validation'
import type { OnrampOrder } from '@/types/onramp'
+import { Button } from '@/components/ui/button' // Added missing import for Button
const ORDER_KEY = 'onramp:latest-order'
export function OnrampPageClient() {
const router = useRouter()
+ const { isConnected: storeConnected, publicKey } = useWallet()
const { address, addresses, connected, loading, updateAddress, disconnect } =
useWalletConnection()
- const walletConnected = Boolean(address) || connected
+ const walletConnected = Boolean(address) || connected || storeConnected || Boolean(publicKey)
const [walletModalOpen, setWalletModalOpen] = useState(false)
const [disconnectModalOpen, setDisconnectModalOpen] = useState(false)
const [rateOverride, setRateOverride] = useState(0)
@@ -40,42 +43,48 @@ export function OnrampPageClient() {
form.state.cryptoAsset
)
- // Use ref to track previous values and avoid setState in effect
- const prevRateRef = useRef(undefined)
- const prevCurrencyRef = useRef(undefined)
- const prevAssetRef = useRef(undefined)
-
+ // Sync rate override when rate changes - using useEffect with proper async pattern
useEffect(() => {
- if (data?.rate && data.rate !== prevRateRef.current) {
- prevRateRef.current = data.rate
- // eslint-disable-next-line react-hooks/set-state-in-effect
- setRateOverride(data.rate)
+ if (data?.rate) {
+ const timer = setTimeout(() => {
+ setRateOverride(data.rate)
+ }, 0)
+ return () => clearTimeout(timer)
}
}, [data?.rate])
+ // Reset rate override when currency or asset changes
useEffect(() => {
- const currencyKey = `${form.state.fiatCurrency}-${form.state.cryptoAsset}`
- const prevKey = `${prevCurrencyRef.current}-${prevAssetRef.current}`
-
- if (currencyKey !== prevKey) {
- prevCurrencyRef.current = form.state.fiatCurrency
- prevAssetRef.current = form.state.cryptoAsset
- // eslint-disable-next-line react-hooks/set-state-in-effect
+ const timer = setTimeout(() => {
setRateOverride(0)
- }
+ }, 0)
+ return () => clearTimeout(timer)
}, [form.state.fiatCurrency, form.state.cryptoAsset])
useEffect(() => {
router.prefetch('/onramp/payment')
}, [router])
- // Fix ESLint: Use setTimeout to avoid direct setState in effect
+ // Only show modal if definitely not connected after loading
useEffect(() => {
if (!loading && !walletConnected) {
- const timer = setTimeout(() => setWalletModalOpen(true), 0)
+ const timer = setTimeout(() => {
+ // Double check after timeout to avoid flicker
+ if (!walletConnected) {
+ const timer2 = setTimeout(() => {
+ setWalletModalOpen(true)
+ }, 0)
+ return () => clearTimeout(timer2)
+ }
+ }, 500)
+ return () => clearTimeout(timer)
+ } else if (walletConnected && walletModalOpen) {
+ const timer = setTimeout(() => {
+ setWalletModalOpen(false)
+ }, 0)
return () => clearTimeout(timer)
}
- }, [loading, walletConnected])
+ }, [loading, walletConnected, walletModalOpen])
const handleCopy = async () => {
try {
@@ -124,7 +133,6 @@ export function OnrampPageClient() {
setDisconnectModalOpen(true)
}
- const headerAddress = useMemo(() => truncateAddress(address, 4), [address])
const processingFeeLabel =
form.state.paymentMethod === 'bank_transfer'
? 'FREE'
@@ -169,24 +177,8 @@ export function OnrampPageClient() {
- {walletConnected ? (
-
-
- {headerAddress}
-
- ) : null}
-
+
+
diff --git a/components/pricing.tsx b/components/pricing.tsx
deleted file mode 100644
index d52596a..0000000
--- a/components/pricing.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-'use client'
-
-import { motion, useInView } from 'framer-motion'
-import { useRef } from 'react'
-import { Check } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-
-const plans = [
- {
- name: 'Personal',
- description: 'For individuals getting started with crypto',
- price: 'Free',
- priceNote: 'No monthly fees',
- features: [
- 'Buy crypto from ₦2,000',
- 'Pay bills & airtime',
- 'Send to 12 countries',
- 'Basic analytics',
- 'Email support',
- ],
- cta: 'Get Started Free',
- highlighted: false,
- },
- {
- name: 'Business',
- description: 'For SMEs accepting cNGN payments',
- price: '₦5,000',
- priceNote: '/month',
- features: [
- 'Everything in Personal',
- 'Accept cNGN payments',
- '0.5% transaction fees',
- 'Business dashboard',
- 'Priority support',
- 'API access',
- 'Multi-user access',
- ],
- cta: 'Start Free Trial',
- highlighted: true,
- },
- {
- name: 'Enterprise',
- description: 'For large organizations & fintechs',
- price: 'Custom',
- priceNote: 'Contact us',
- features: [
- 'Everything in Business',
- 'Custom integration',
- 'Volume discounts',
- 'Dedicated manager',
- 'SLA guarantee',
- 'White-label options',
- 'Compliance support',
- ],
- cta: 'Contact Sales',
- highlighted: false,
- },
-]
-
-function BorderBeam() {
- return (
-
- )
-}
-
-export function Pricing() {
- const ref = useRef(null)
- const isInView = useInView(ref, { once: true, margin: '-100px' })
-
- return (
-
- )
-}
diff --git a/components/receive/receive-page-client.tsx b/components/receive/receive-page-client.tsx
new file mode 100644
index 0000000..ed9bc05
--- /dev/null
+++ b/components/receive/receive-page-client.tsx
@@ -0,0 +1,470 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+ ArrowLeft,
+ Copy,
+ Check,
+ Share2,
+ Download,
+ Link2,
+ MessageCircle,
+ Twitter,
+ ChevronDown,
+} from 'lucide-react'
+import QRCode from 'react-qr-code'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+interface Asset {
+ symbol: string
+ name: string
+ color: string
+ bgColor: string
+ icon: string
+}
+
+const ASSETS: Asset[] = [
+ {
+ symbol: 'XLM',
+ name: 'Stellar Lumens',
+ color: 'text-sky-500',
+ bgColor: 'bg-sky-500/10 border-sky-500/30',
+ icon: '✦',
+ },
+ {
+ symbol: 'USDC',
+ name: 'USD Coin',
+ color: 'text-blue-500',
+ bgColor: 'bg-blue-500/10 border-blue-500/30',
+ icon: '$',
+ },
+ {
+ symbol: 'BTC',
+ name: 'Bitcoin',
+ color: 'text-amber-500',
+ bgColor: 'bg-amber-500/10 border-amber-500/30',
+ icon: '₿',
+ },
+ {
+ symbol: 'ETH',
+ name: 'Ethereum',
+ color: 'text-indigo-500',
+ bgColor: 'bg-indigo-500/10 border-indigo-500/30',
+ icon: 'Ξ',
+ },
+]
+
+// Mock wallet address — in production, pull from wallet context
+const WALLET_ADDRESS = 'GBSN2ZJBRFWTQHWRJQE4GKDJJDSGPVTLQNQCQX7QR5W5VKHNHQH'
+
+interface ReceivePageClientProps {
+ walletAddress?: string
+}
+
+export function ReceivePageClient({ walletAddress = WALLET_ADDRESS }: ReceivePageClientProps) {
+ const router = useRouter()
+ const [selectedAsset, setSelectedAsset] = useState
- {/* eslint-disable-next-line @next/next/no-img-element */}
- 
-