{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "currency-converter-widget", "title": "Currency Converter Widget", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/currency-converter-widget/CurrencyConverterWidget.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowDownRight,\n ArrowRight,\n ArrowUpDown,\n ArrowUpRight,\n Building2,\n Lock,\n Minus,\n RefreshCw,\n ShieldCheck,\n Coins,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface CurrencyOption {\n code: string\n name: string\n symbol: string\n flag: string\n rateToBase: number // USD base = 1.0\n deliverySpeed: string\n deliveryNetwork: string\n}\n\nexport interface PopularPair {\n id: string\n from: string\n to: string\n change24h: number\n trend: 'up' | 'down'\n}\n\nexport interface TransferPayload {\n sendAmount: number\n fromCurrency: string\n toCurrency: string\n recipientGets: number\n fee: number\n rate: number\n}\n\nexport interface CurrencyConverterWidgetProps {\n initialSendAmount?: number\n initialFromCurrency?: string\n initialToCurrency?: string\n className?: string\n onTransfer?: (payload: TransferPayload) => void\n}\n\nconst CURRENCIES: CurrencyOption[] = [\n {\n code: 'USD',\n name: 'US Dollar',\n symbol: '$',\n flag: 'πŸ‡ΊπŸ‡Έ',\n rateToBase: 1.0,\n deliverySpeed: 'in minutes',\n deliveryNetwork: 'FedNow / RTP',\n },\n {\n code: 'EUR',\n name: 'Euro',\n symbol: '€',\n flag: 'πŸ‡ͺπŸ‡Ί',\n rateToBase: 0.9245,\n deliverySpeed: 'in minutes',\n deliveryNetwork: 'SEPA Instant',\n },\n {\n code: 'GBP',\n name: 'British Pound',\n symbol: 'Β£',\n flag: 'πŸ‡¬πŸ‡§',\n rateToBase: 0.7892,\n deliverySpeed: 'in seconds',\n deliveryNetwork: 'Faster Payments',\n },\n {\n code: 'JPY',\n name: 'Japanese Yen',\n symbol: 'Β₯',\n flag: 'πŸ‡―πŸ‡΅',\n rateToBase: 154.6,\n deliverySpeed: 'within 4 hours',\n deliveryNetwork: 'Zengin System',\n },\n {\n code: 'CAD',\n name: 'Canadian Dollar',\n symbol: 'CA$',\n flag: 'πŸ‡¨πŸ‡¦',\n rateToBase: 1.378,\n deliverySpeed: 'in minutes',\n deliveryNetwork: 'Interac Direct',\n },\n {\n code: 'AUD',\n name: 'Australian Dollar',\n symbol: 'A$',\n flag: 'πŸ‡¦πŸ‡Ί',\n rateToBase: 1.523,\n deliverySpeed: 'in minutes',\n deliveryNetwork: 'NPP / PayID',\n },\n {\n code: 'SGD',\n name: 'Singapore Dollar',\n symbol: 'S$',\n flag: 'πŸ‡ΈπŸ‡¬',\n rateToBase: 1.348,\n deliverySpeed: 'instant',\n deliveryNetwork: 'FAST Network',\n },\n {\n code: 'CHF',\n name: 'Swiss Franc',\n symbol: 'CHF',\n flag: 'πŸ‡¨πŸ‡­',\n rateToBase: 0.898,\n deliverySpeed: 'in minutes',\n deliveryNetwork: 'SIC Instant',\n },\n]\n\nconst POPULAR_PAIRS: PopularPair[] = [\n { id: 'eur-usd', from: 'EUR', to: 'USD', change24h: 0.18, trend: 'up' },\n { id: 'gbp-usd', from: 'GBP', to: 'USD', change24h: 0.24, trend: 'up' },\n { id: 'usd-jpy', from: 'USD', to: 'JPY', change24h: -0.32, trend: 'down' },\n { id: 'usd-cad', from: 'USD', to: 'CAD', change24h: 0.09, trend: 'up' },\n { id: 'usd-eur', from: 'USD', to: 'EUR', change24h: -0.18, trend: 'down' },\n { id: 'gbp-eur', from: 'GBP', to: 'EUR', change24h: 0.05, trend: 'up' },\n]\n\nfunction formatAmount(val: number, currencyCode: string): string {\n const isZeroDecimal = currencyCode === 'JPY'\n return new Intl.NumberFormat('en-US', {\n minimumFractionDigits: isZeroDecimal ? 0 : 2,\n maximumFractionDigits: isZeroDecimal ? 0 : 2,\n }).format(val)\n}\n\nfunction getPairRate(fromCode: string, toCode: string): string {\n const f = CURRENCIES.find((c) => c.code === fromCode)?.rateToBase || 1\n const t = CURRENCIES.find((c) => c.code === toCode)?.rateToBase || 1\n const rate = t / f\n return rate >= 100 ? rate.toFixed(2) : rate.toFixed(4)\n}\n\nexport function CurrencyConverterWidget({\n initialSendAmount = 1000,\n initialFromCurrency = 'USD',\n initialToCurrency = 'EUR',\n className,\n onTransfer,\n}: CurrencyConverterWidgetProps) {\n const [sendAmount, setSendAmount] = React.useState(initialSendAmount)\n const [fromCurrency, setFromCurrency] = React.useState(initialFromCurrency)\n const [toCurrency, setToCurrency] = React.useState(initialToCurrency)\n const [paymentMethod, setPaymentMethod] = React.useState<'bank' | 'card'>('bank')\n const [isRefreshing, setIsRefreshing] = React.useState(false)\n const [refreshSuccess, setRefreshSuccess] = React.useState(false)\n\n const fromCurrencyObj = React.useMemo(\n () => CURRENCIES.find((c) => c.code === fromCurrency) || CURRENCIES[0],\n [fromCurrency],\n )\n const toCurrencyObj = React.useMemo(\n () => CURRENCIES.find((c) => c.code === toCurrency) || CURRENCIES[1],\n [toCurrency],\n )\n\n // Dynamic mid-market rate calculation\n const exchangeRate = React.useMemo(() => {\n if (!fromCurrencyObj || !toCurrencyObj) return 1\n return toCurrencyObj.rateToBase / fromCurrencyObj.rateToBase\n }, [fromCurrencyObj, toCurrencyObj])\n\n const formattedExchangeRate = React.useMemo(() => {\n if (exchangeRate >= 100) return exchangeRate.toFixed(2)\n if (exchangeRate >= 1) return exchangeRate.toFixed(4)\n return exchangeRate.toFixed(5)\n }, [exchangeRate])\n\n // Fee calculation logic\n const fixedBaseFee = React.useMemo(() => {\n const base = 1.2 * fromCurrencyObj.rateToBase\n return paymentMethod === 'card' ? base * 1.6 : base\n }, [fromCurrencyObj, paymentMethod])\n\n const variableRate = paymentMethod === 'card' ? 0.0065 : 0.0035\n const variableFee = (sendAmount || 0) * variableRate\n const totalFee = fixedBaseFee + variableFee\n const amountToConvert = Math.max(0, (sendAmount || 0) - totalFee)\n const recipientGets = amountToConvert * exchangeRate\n\n // Bank comparison calculation\n const bankWireFee = 20 * fromCurrencyObj.rateToBase\n const bankMarkupSpread = 0.032 // 3.2% average hidden bank margin\n const bankTotalCost = bankWireFee + (sendAmount || 0) * bankMarkupSpread\n const estimatedSavings = Math.max(0, bankTotalCost - totalFee)\n\n const handleSwap = React.useCallback(() => {\n setFromCurrency(toCurrency)\n setToCurrency(fromCurrency)\n }, [fromCurrency, toCurrency])\n\n const handleSelectPair = React.useCallback((pair: PopularPair) => {\n setFromCurrency(pair.from)\n setToCurrency(pair.to)\n }, [])\n\n const handleRefresh = React.useCallback(() => {\n if (isRefreshing) return\n setIsRefreshing(true)\n setTimeout(() => {\n setIsRefreshing(false)\n setRefreshSuccess(true)\n setTimeout(() => {\n setRefreshSuccess(false)\n }, 2000)\n }, 450)\n }, [isRefreshing])\n\n const handleTransfer = React.useCallback(() => {\n onTransfer?.({\n sendAmount: Number(sendAmount) || 0,\n fromCurrency,\n toCurrency,\n recipientGets,\n fee: totalFee,\n rate: exchangeRate,\n })\n }, [sendAmount, fromCurrency, toCurrency, recipientGets, totalFee, exchangeRate, onTransfer])\n\n return (\n
\n {/* Header Section */}\n
\n
\n

\n Currency Converter & International Transfer\n

\n \n \n Live Market Rates\n \n
\n

\n Real-time mid-market exchange rates with transparent fees. No hidden markups.\n

\n\n {/* Refresh & Current Mid-market rate banner */}\n
\n
\n \n Mid-market rate: 1 {fromCurrencyObj.code} = {formattedExchangeRate} {toCurrencyObj.code}\n \n Updated 1m ago\n
\n \n \n {refreshSuccess ? 'Refreshed!' : 'Refresh'}\n \n
\n
\n\n {/* Main Converter Card */}\n \n \n {/* Payment method tab pill */}\n
\n
\n setPaymentMethod('bank')}\n >\n Bank Transfer (Lowest Fee)\n \n setPaymentMethod('card')}\n >\n Debit / Credit Card\n \n
\n\n \n
\n\n {/* \"You send\" Input Container */}\n
\n
\n \n Max limit: $100,000 / transfer\n
\n\n
\n
\n \n {fromCurrencyObj.symbol}\n \n setSendAmount(Number.parseFloat(e.target.value) || 0)}\n type=\"number\"\n min=\"1\"\n step=\"any\"\n placeholder=\"1,000.00\"\n className=\"text-foreground placeholder:text-muted-foreground/40 w-full bg-transparent text-2xl font-bold tracking-tight tabular-nums outline-none sm:text-3xl\"\n />\n
\n\n {/* From Currency Selector */}\n
\n \n
\n
\n
\n\n {/* Transfer Breakdown Rail (Vertical Connector) */}\n
\n {/* Step 1: Fee */}\n
\n
\n \n
\n
\n \n -{fromCurrencyObj.symbol}\n {formatAmount(totalFee, fromCurrencyObj.code)} {fromCurrencyObj.code}\n \n Transfer fee\n \n {paymentMethod === 'card' ? '0.65% + $1.20' : '0.35% + $1.20'}\n \n
\n \n
\n\n {/* Step 2: Amount to convert */}\n
\n
\n =\n
\n
\n \n {fromCurrencyObj.symbol}\n {formatAmount(amountToConvert, fromCurrencyObj.code)} {fromCurrencyObj.code}\n \n Amount to convert\n
\n \n
\n\n {/* Step 3: Guaranteed Exchange Rate & Swap Button Line */}\n
\n
\n \n
\n
\n Γ— {formattedExchangeRate}\n Guaranteed mid-market rate\n \n \n 24h Guarantee\n \n
\n\n {/* Swap Currencies Button */}\n \n \n Swap\n \n
\n
\n\n {/* \"Recipient gets\" Input / Output Container */}\n
\n
\n \n \n \n {toCurrencyObj.deliverySpeed}\n \n
\n\n
\n
\n \n {toCurrencyObj.symbol}\n \n
\n {formatAmount(recipientGets, toCurrencyObj.code)}\n
\n
\n\n {/* To Currency Selector */}\n
\n \n
\n
\n
\n\n {/* Delivery Speed & Savings Breakdown Banner */}\n
\n
\n
\n \n \n \n
\n

Estimated delivery: {toCurrencyObj.deliverySpeed}

\n

Via {toCurrencyObj.deliveryNetwork}

\n
\n
\n\n \n \n Save ~{fromCurrencyObj.symbol}\n {formatAmount(estimatedSavings, fromCurrencyObj.code)} {fromCurrencyObj.code}\n \n
\n\n \n\n {/* Comparison vs Standard High-Street Bank */}\n
\n
\n \n
\n

UIPKGE Transfer

\n

\n Fee: {fromCurrencyObj.symbol}\n {formatAmount(totalFee, fromCurrencyObj.code)} Β· 0% exchange spread\n

\n
\n
\n\n
\n \n
\n

Standard Bank Wire

\n

\n Fee: ~{fromCurrencyObj.symbol}\n {formatAmount(bankTotalCost, fromCurrencyObj.code)} Β· ~3.2% hidden spread\n

\n
\n
\n
\n
\n\n {/* Primary Action Button */}\n \n\n

\n \n Rates locked for 24 hours. Licensed & regulated financial institution.\n

\n \n \n\n {/* Popular Currency Pairs Quick Rate Ticker */}\n
\n
\n

Popular Currency Pairs

\n Click pair to load\n
\n\n
\n {POPULAR_PAIRS.map((pair) => {\n const isSelected = fromCurrency === pair.from && toCurrency === pair.to\n return (\n handleSelectPair(pair)}\n >\n
\n \n {pair.from} / {pair.to}\n \n \n {pair.trend === 'up' ? : }\n {pair.change24h > 0 ? `+${pair.change24h}%` : `${pair.change24h}%`}\n \n
\n\n
{getPairRate(pair.from, pair.to)}
\n \n )\n })}\n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/CurrencyConverterWidget.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Wise and Revolut-style real-time multi-currency exchange calculator and transfer fee estimator with live mid-market rates, transparent fee breakdown rail, bank savings comparison, and quick-rate ticker.", "categories": [ "finance", "fintech", "billing", "commerce" ] }