Feature/pwa install prompt v2

app/bills/invoice/[invoiceId]/page.tsx

@@ -7,7 +7,7 @@ import { ArrowLeft, ShieldCheck, Zap } from 'lucide-react'
 import { motion } from 'framer-motion'
 import { Button } from '@/components/ui/button'
 import { decodeInvoice } from '@/lib/bills/qr-invoice'
-import { formatCurrency } from '@/lib/onramp/formatters'
+import { formatCurrency } from '@/lib/calculations'
 import type { FiatCurrency } from '@/types/onramp'
 import { BILLER_SCHEMAS } from '@/lib/biller-schemas'
 import { PaymentForm } from '@/components/bills/payment-form'

app/layout.tsx

@@ -43,6 +43,12 @@ export const metadata: Metadata = {
     'Aframp',
   ],
   generator: 'v0.app',
+  manifest: '/manifest.json',
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: 'default',
+    title: 'Aframp',
+  },
 }
 
 export const viewport: Viewport = {

app/manifest.ts

@@ -0,0 +1,25 @@
+import type { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Aframp',
+    short_name: 'Aframp',
+    description: 'Africa\'s premier cNGN stablecoin payment platform',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#000000',
+    theme_color: '#10b981',
+    icons: [
+      {
+        src: '/icon-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: '/icon-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+    ],
+  }
+}

app/offramp/success/page.tsx

@@ -17,7 +17,7 @@ import {
   Loader2,
 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { formatCurrency } from '@/lib/onramp/formatters'
+import { formatCurrency } from '@/lib/calculations'
 import { generateReceiptPDF } from '@/lib/offramp/pdf-generator'
 import { toast } from 'sonner'
 import { OfframpWalletGuard } from '@/components/offramp/offramp-wallet-guard'

components/bills/bills-receipt-client.tsx

@@ -6,7 +6,7 @@
 import { Copy, Download, Mail, PhoneCall, Printer, RefreshCw, Share2 } from 'lucide-react'
 import QRCode from 'react-qr-code'
 import { Button } from '@/components/ui/button'
-import { formatCurrency } from '@/lib/onramp/formatters'
+import { formatCurrency } from '@/lib/calculations'
 import type { FiatCurrency } from '@/types/onramp'
 import { generateReceiptPDF } from '@/lib/offramp/pdf-generator'
 import { exportReceiptPNG, exportReceiptCSV } from '@/lib/bills/export'
@@ -380,7 +380,7 @@
             <div className="rounded-3xl border border-border bg-muted/20 p-6">
               <h3 className="text-sm font-semibold text-foreground">Need help?</h3>
               <p className="mt-2 text-sm text-muted-foreground">
                 If your transaction failed or needs review, contact support and we'll help quickly.
               </p>
               <div className="mt-4 flex flex-col gap-2">
                 <Button variant="outline" className="w-full" asChild>
@@ -400,7 +400,7 @@
               <div className="rounded-3xl border border-destructive/20 bg-destructive/10 p-6 text-sm text-destructive">
                 <p className="font-semibold">Payment failed</p>
                 <p className="mt-2">
                   We couldn't complete this payment. Please retry or contact support.
                 </p>
                 <Button variant="outline" className="mt-4 w-full" asChild>
                   <Link href="/bills">Retry payment</Link>

components/bills/qr-invoice-modal.tsx

@@ -6,7 +6,7 @@ import { Copy, Download, Share2, X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { toast } from 'sonner'
 import { buildInvoiceUrl, encodeInvoice, type QRInvoiceData } from '@/lib/bills/qr-invoice'
-import { formatCurrency } from '@/lib/onramp/formatters'
+import { formatCurrency } from '@/lib/calculations'
 import type { FiatCurrency } from '@/types/onramp'
 
 interface QRInvoiceModalProps {

components/offramp/asset-selector.tsx

@@ -3,7 +3,7 @@
 import { useMemo, useState } from 'react'
 import { ChevronDown } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { formatNumber } from '@/lib/onramp/formatters'
+import { formatNumber } from '@/lib/calculations'
 import type { OfframpAssetOption } from '@/types/offramp'
 import { CryptoAssetBadge } from '@/components/icons/finance-icons'
 

components/offramp/offramp-calculator.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button'
 import { AmountInput } from '@/components/onramp/amount-input'
 import { CurrencySelector } from '@/components/onramp/currency-selector'
 import { AssetSelector } from '@/components/offramp/asset-selector'
-import { formatCurrency, formatNumber } from '@/lib/onramp/formatters'
+import { formatCurrency, formatNumber } from '@/lib/calculations'
 import { formatRateCountdown, formatUsd } from '@/lib/offramp/formatters'
 import type { FiatCurrency } from '@/types/onramp'
 import type { OfframpAssetOption } from '@/types/offramp'

components/offramp/offramp-page-client.tsx

@@ -11,7 +11,7 @@ import { useOfframpRate } from '@/hooks/use-offramp-rate'
 import { useOfframpForm } from '@/hooks/use-offramp-form'
 import { useOfframpBalances } from '@/hooks/use-offramp-balances'
 import { Skeleton } from '@/components/ui/skeleton'
-import { formatCurrency } from '@/lib/onramp/formatters'
+import { formatCurrency } from '@/lib/calculations'
 import { formatUsd, formatRateCountdown } from '@/lib/offramp/formatters'
 import type { OfframpOrder } from '@/types/offramp'
 

components/onramp/onramp-calculator.tsx

@@ -7,7 +7,7 @@ import { ExchangeRateDisplay } from '@/components/onramp/exchange-rate-display'
 import { PaymentMethodCard } from '@/components/onramp/payment-method-card'
 import { WalletDisplay } from '@/components/onramp/wallet-display'
 import { Button } from '@/components/ui/button'
-import { formatCurrency, formatNumber } from '@/lib/onramp/formatters'
+import { formatCurrency, formatNumber } from '@/lib/calculations'
 import { PaymentMethodGlyph } from '@/components/icons/finance-icons'
 import type { CryptoAsset, FiatCurrency, PaymentMethod } from '@/types/onramp'
 

components/onramp/onramp-page-client.tsx

@@ -20,8 +20,7 @@ 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 } from '@/lib/onramp/formatters'
-import { isValidStellarAddress } from '@/lib/onramp/validation'
+import { formatCurrency, isValidStellarAddress } from '@/lib/calculations'
 import type { OnrampOrder } from '@/types/onramp'
 import { Button } from '@/components/ui/button' // Added missing import for Button
 import { Skeleton } from '@/components/ui/skeleton'

components/onramp/onramp-payment-client.tsx

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button'
 import { LoadingSpinner } from '@/components/ui/loading-spinner'
 import { OrderStatus } from '@/types/onramp'
 import { useOrderTracking } from '@/hooks/use-order-tracking'
-import { formatCurrency, truncateAddress } from '@/lib/onramp/formatters'
+import { formatCurrency, truncateAddress } from '@/lib/calculations'
 
 export function OnrampPaymentClient() {
   const router = useRouter()

components/onramp/onramp-processing-client.tsx

@@ -14,7 +14,7 @@ import { OrderSummaryCard } from '@/components/onramp/order-summary-card'
 import { TransactionDetails } from '@/components/onramp/transaction-details'
 import { ProcessingTestUtils } from '@/components/onramp/processing-test-utils'
 import { Skeleton } from '@/components/ui/skeleton'
-import { formatCurrency, formatNumber } from '@/lib/onramp/formatters'
+import { formatCurrency, formatNumber } from '@/lib/calculations'
 
 interface OnrampProcessingClientProps {
   orderId: string

components/onramp/onramp-success-client.tsx

@@ -20,7 +20,7 @@ import {
 import { Button } from '@/components/ui/button'
 import { LoadingSpinner } from '@/components/ui/loading-spinner'
 import { OnrampOrder } from '@/types/onramp'
-import { formatCurrency } from '@/lib/onramp/formatters'
+import { formatCurrency } from '@/lib/calculations'
 import { generateReceiptPDF } from '@/lib/onramp/receipt'
 
 export function OnrampSuccessClient() {

components/onramp/order-summary-card.tsx

@@ -6,7 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { Badge } from '@/components/ui/badge'
-import { formatCurrency, formatNumber, truncateAddress } from '@/lib/onramp/formatters'
+import { formatCurrency, formatNumber, truncateAddress } from '@/lib/calculations'
 import type { OnrampOrder } from '@/types/onramp'
 
 interface OrderSummaryCardProps {

components/onramp/wallet-display.tsx

@@ -12,8 +12,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { cn } from '@/lib/utils'
-import { isValidStellarAddress } from '@/lib/onramp/validation'
-import { truncateAddress } from '@/lib/onramp/formatters'
+import { isValidStellarAddress, truncateAddress } from '@/lib/calculations'
 
 interface WalletDisplayProps {
   address: string

hooks/use-exchange-rate.ts

@@ -7,7 +7,7 @@ import type {
   ExchangeRateState,
   FiatCurrency,
 } from '@/types/onramp'
-import { formatRate } from '@/lib/onramp/formatters'
+import { formatRate } from '@/lib/calculations'
 
 const API_URL = '/api/exchange-rate'
 

hooks/use-offramp-form.ts

@@ -4,7 +4,7 @@
 import type { FiatCurrency } from '@/types/onramp'
 import type { OfframpAssetOption, OfframpFormState } from '@/types/offramp'
 import { calculateFiatAmount, calculateFees, getMinMax } from '@/lib/offramp/calculations'
-import { formatAmountInput, parseAmountInput } from '@/lib/onramp/formatters'
+import { formatAmountInput, parseAmountInput, formatCurrency } from '@/lib/calculations'
 
 const STORAGE_KEY = 'offramp:form'
 const EXPIRY_MS = 15 * 60 * 1000
@@ -108,7 +108,7 @@
     }
 
     Promise.resolve().then(() => setErrors(nextErrors))
   }, [debouncedAmount, fiatAmount, limits.max, limits.min, state.amountInput])
 
   const setAmountInput = useCallback((value: string) => {
     const sanitized = value.replace(/[^0-9.]/g, '')

hooks/use-onramp-form.ts

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import type { CryptoAsset, FiatCurrency, OnrampFormState, PaymentMethod } from '@/types/onramp'
 import { calculateCryptoAmount, calculateFeeBreakdown } from '@/lib/onramp/calculations'
-import { formatAmountInput, parseAmountInput } from '@/lib/onramp/formatters'
+import { formatAmountInput, parseAmountInput, formatCurrency } from '@/lib/calculations'
 import { getLimits, validateAmount } from '@/lib/onramp/validation'
 
 const STORAGE_KEY = 'onramp:form'

hooks/use-wallet-connection.ts

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useState } from 'react'
-import { isValidStellarAddress } from '@/lib/onramp/validation'
+import { isValidStellarAddress } from '@/lib/calculations'
 import { useWallet } from '@/hooks/useWallet'
 import { walletSession } from '@/lib/wallet/session'
 

lib/onramp/validation.ts

@@ -1,5 +1,5 @@
 import type { FiatCurrency } from '@/types/onramp'
-import { formatCurrency } from '@/lib/onramp/formatters'
+import { formatCurrency } from '@/lib/calculations'
 
 const limitsMap: Record<FiatCurrency, { min: number; max: number }> = {
   NGN: { min: 1000, max: 500000 },

next.config.mjs

@@ -1,3 +1,12 @@
+import withPWAInit from 'next-pwa'
+
+const withPWA = withPWAInit({
+  dest: 'public',
+  register: true,
+  skipWaiting: true,
+  disable: process.env.NODE_ENV === 'development',
+})
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   typescript: {
@@ -10,4 +19,4 @@ const nextConfig = {
   output: 'standalone',
 }
 
-export default nextConfig
+export default withPWA(nextConfig)