{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "currency-converter-widget", "title": "Currency Converter Widget", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/currency-converter-widget/currency-converter-widget.component.ts", "content": "// Wise and Revolut-style real-time multi-currency exchange calculator and transfer fee\n// estimator with live mid-market rates, transparent fee breakdown rail, bank savings\n// comparison, and quick-rate ticker. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport {\n ArrowDownRight,\n ArrowRight,\n ArrowUpDown,\n ArrowUpRight,\n Building2,\n Coins,\n Lock,\n LucideAngularModule,\n Minus,\n RefreshCw,\n ShieldCheck,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\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\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-currency-converter-widget, [ui-currency-converter-widget]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \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 \n \n
\n \n Mid-market rate: 1 {{ fromCurrencyObj().code }} = {{ formattedExchangeRate() }}\n {{ toCurrencyObj().code }}\n \n Updated 1m ago\n
\n \n \n {{ refreshSuccess() ? 'Refreshed!' : 'Refresh' }}\n \n
\n
\n\n \n
\n
\n \n
\n
\n \n \n
\n\n \n
\n\n \n \n
\n \n Max limit: $100,000 / transfer\n
\n\n
\n
\n \n {{ fromCurrencyObj().symbol }}\n \n \n
\n\n \n
\n \n \n \n @for (curr of currencies; track curr.code) {\n \n
\n {{ curr.flag }}\n {{ curr.code }}\n ({{ curr.name }})\n
\n \n }\n \n \n
\n
\n
\n\n \n \n \n
\n \n \n
\n
\n \n -{{ fromCurrencyObj().symbol }}{{ formatAmount(totalFee(), fromCurrencyObj().code) }}\n {{ fromCurrencyObj().code }}\n \n Transfer fee\n \n {{ paymentMethod() === 'card' ? '0.65% + $1.20' : '0.35% + $1.20' }}\n \n
\n \n
\n\n \n
\n \n =\n
\n
\n \n {{ fromCurrencyObj().symbol }}{{ formatAmount(amountToConvert(), fromCurrencyObj().code) }}\n {{ fromCurrencyObj().code }}\n \n Amount to convert\n
\n \n
\n\n \n
\n \n \n
\n
\n Γ— {{ formattedExchangeRate() }} \n Guaranteed mid-market rate\n \n \n 24h Guarantee\n \n
\n\n \n \n \n Swap\n \n \n \n\n \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 \n
\n \n \n \n @for (curr of currencies; track curr.code) {\n \n
\n {{ curr.flag }}\n {{ curr.code }}\n ({{ curr.name }})\n
\n \n }\n \n \n
\n \n \n\n \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 }}{{ formatAmount(estimatedSavings(), fromCurrencyObj().code) }}\n {{ fromCurrencyObj().code }}\n \n
\n\n \n\n \n
\n
\n \n
\n

UIPKGE Transfer

\n

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

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

Standard Bank Wire

\n

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

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

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

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

Popular Currency Pairs

\n Click pair to load\n
\n\n
\n @for (pair of popularPairs; track pair.id) {\n \n }\n
\n
\n \n `,\n})\nexport class UiCurrencyConverterWidgetComponent {\n protected readonly ArrowDownRight = ArrowDownRight\n protected readonly ArrowRight = ArrowRight\n protected readonly ArrowUpDown = ArrowUpDown\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Building2 = Building2\n protected readonly Coins = Coins\n protected readonly Lock = Lock\n protected readonly Minus = Minus\n protected readonly RefreshCw = RefreshCw\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Zap = Zap\n\n protected readonly currencies = CURRENCIES\n protected readonly popularPairs = POPULAR_PAIRS\n\n @Input() set initialSendAmount(v: number | undefined) {\n if (v !== undefined) this.sendAmount.set(v)\n }\n @Input() set initialFromCurrency(v: string | undefined) {\n if (v) this.fromCurrency.set(v)\n }\n @Input() set initialToCurrency(v: string | undefined) {\n if (v) this.toCurrency.set(v)\n }\n @Input('class') className?: string\n @Output() transfer = new EventEmitter()\n\n readonly sendAmount = signal(1000)\n readonly fromCurrency = signal('USD')\n readonly toCurrency = signal('EUR')\n readonly paymentMethod = signal<'bank' | 'card'>('bank')\n readonly isRefreshing = signal(false)\n readonly refreshSuccess = signal(false)\n\n readonly fromCurrencyObj = computed(() => CURRENCIES.find((c) => c.code === this.fromCurrency()) || CURRENCIES[0]!)\n readonly toCurrencyObj = computed(() => CURRENCIES.find((c) => c.code === this.toCurrency()) || CURRENCIES[1]!)\n\n // Dynamic mid-market rate calculation\n readonly exchangeRate = computed(() => {\n const from = this.fromCurrencyObj()\n const to = this.toCurrencyObj()\n if (!from || !to) return 1\n return to.rateToBase / from.rateToBase\n })\n\n readonly inverseExchangeRate = computed(() => {\n if (this.exchangeRate() === 0) return 0\n return 1 / this.exchangeRate()\n })\n\n readonly formattedExchangeRate = computed(() => {\n const r = this.exchangeRate()\n if (r >= 100) return r.toFixed(2)\n if (r >= 1) return r.toFixed(4)\n return r.toFixed(5)\n })\n\n // Fee breakdown logic\n readonly fixedBaseFee = computed(() => {\n // Base fixed fee equivalent to ~$1.20 USD\n const fromRate = this.fromCurrencyObj().rateToBase\n const base = 1.2 * fromRate\n return this.paymentMethod() === 'card' ? base * 1.6 : base\n })\n\n readonly variableRate = computed(() => (this.paymentMethod() === 'card' ? 0.0065 : 0.0035))\n\n readonly variableFee = computed(() => {\n const amt = Number(this.sendAmount()) || 0\n return amt * this.variableRate()\n })\n\n readonly totalFee = computed(() => this.fixedBaseFee() + this.variableFee())\n\n readonly amountToConvert = computed(() => {\n const amt = Number(this.sendAmount()) || 0\n return Math.max(0, amt - this.totalFee())\n })\n\n readonly recipientGets = computed(() => this.amountToConvert() * this.exchangeRate())\n\n // Bank comparison calculation\n readonly bankWireFee = computed(() => 20 * this.fromCurrencyObj().rateToBase)\n private readonly bankMarkupSpread = 0.032 // 3.2% average hidden bank margin\n readonly bankTotalCost = computed(() => {\n const amt = Number(this.sendAmount()) || 0\n return this.bankWireFee() + amt * this.bankMarkupSpread\n })\n\n readonly estimatedSavings = computed(() => Math.max(0, this.bankTotalCost() - this.totalFee()))\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-2xl space-y-6', this.className)\n }\n\n get refreshIconClass(): string {\n return cn('size-3.5 transition-transform duration-500', this.isRefreshing() ? 'text-primary animate-spin' : '')\n }\n\n methodTabClass(method: 'bank' | 'card'): string {\n return cn(\n 'min-h-6 rounded-md px-3 py-1 font-medium transition-colors',\n this.paymentMethod() === method\n ? 'bg-card text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n pairCardClass(pair: PopularPair): string {\n const selected = this.fromCurrency() === pair.from && this.toCurrency() === pair.to\n return cn(\n 'hover:bg-accent focus-visible:ring-ring flex flex-col items-start gap-1 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n selected ? 'border-primary bg-primary/5 ring-primary/20 ring-1' : 'border-border bg-card',\n )\n }\n\n pairTrendClass(pair: PopularPair): string {\n return cn('flex items-center text-xs font-medium', pair.trend === 'up' ? 'text-success' : 'text-destructive')\n }\n\n formatAmount(val: number, currencyCode: string): string {\n return formatAmount(val, currencyCode)\n }\n\n getPairRate(fromCode: string, toCode: string): string {\n return getPairRate(fromCode, toCode)\n }\n\n onAmountChange(raw: string): void {\n this.sendAmount.set(Number.parseFloat(raw) || 0)\n }\n\n handleSwap(): void {\n const temp = this.fromCurrency()\n this.fromCurrency.set(this.toCurrency())\n this.toCurrency.set(temp)\n }\n\n handleSelectPair(pair: PopularPair): void {\n this.fromCurrency.set(pair.from)\n this.toCurrency.set(pair.to)\n }\n\n handleRefresh(): void {\n if (this.isRefreshing()) return\n this.isRefreshing.set(true)\n setTimeout(() => {\n this.isRefreshing.set(false)\n this.refreshSuccess.set(true)\n setTimeout(() => {\n this.refreshSuccess.set(false)\n }, 2000)\n }, 450)\n }\n\n handleTransfer(): void {\n this.transfer.emit({\n sendAmount: Number(this.sendAmount()) || 0,\n fromCurrency: this.fromCurrency(),\n toCurrency: this.toCurrency(),\n recipientGets: this.recipientGets(),\n fee: this.totalFee(),\n rate: this.exchangeRate(),\n })\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/currency-converter-widget/currency-converter-widget.component.ts" }, { "path": "packages/registry-angular/blocks/currency-converter-widget/index.ts", "content": "export {\n UiCurrencyConverterWidgetComponent,\n type CurrencyOption,\n type PopularPair,\n type TransferPayload,\n} from './currency-converter-widget.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/currency-converter-widget/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/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" ] }