62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T4bca,'use client' import * as React from 'react' import { ArrowLeft, Building2, CheckCircle2, ExternalLink, Loader2, Lock, Search, Shield } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' import { Input } from '@/components/ui/input' import { Separator } from '@/components/ui/separator' export interface BankInstitution { id: string name: string fullName: string tagline: string } export interface BankAccount { id: string name: string last4: string type: 'Checking' | 'Savings' | 'Credit' balance: string balanceLabel: string subtitle: string } export interface ConnectPayload { bankId: string bankName: string accountId: string accountName: string last4: string balance: string } export interface BankAccountConnectorProps { initialBankId?: string className?: string onConnect?: (payload: ConnectPayload) => void onCancel?: () => void onSelectBank?: (bankId: string) => void } const institutions: BankInstitution[] = [ { id: 'chase', name: 'Chase', fullName: 'JPMorgan Chase Bank', tagline: 'Checking, Savings & Credit' }, { id: 'bofa', name: 'Bank of America', fullName: 'Bank of America N.A.', tagline: 'Advantage Banking' }, { id: 'wellsfargo', name: 'Wells Fargo', fullName: 'Wells Fargo Bank', tagline: 'Everyday & Way2Save' }, { id: 'citibank', name: 'Citibank', fullName: 'Citibank N.A.', tagline: 'Citi Priority & Access' }, { id: 'capitalone', name: 'Capital One', fullName: 'Capital One Bank', tagline: '360 Checking & Savings' }, { id: 'svb', name: 'SVB', fullName: 'Silicon Valley Bank', tagline: 'Commercial & Startup Banking' }, ] const accounts: BankAccount[] = [ { id: 'acc-chk-4892', name: 'Checking', last4: '4892', type: 'Checking', balance: '$14,250.00', balanceLabel: 'Available balance', subtitle: 'Primary checking account', }, { id: 'acc-sav-9210', name: 'Savings', last4: '9210', type: 'Savings', balance: '$48,900.00', balanceLabel: 'Available balance', subtitle: 'High yield savings', }, { id: 'acc-crd-1049', name: 'Business Credit', last4: '1049', type: 'Credit', balance: '$5,200.00', balanceLabel: 'Current balance', subtitle: 'Corporate credit line', }, ] function BankIcon({ id, className }: { id: string; className?: string }) { switch (id) { case 'chase': return ( ) case 'bofa': return ( ) case 'wellsfargo': return ( ) case 'citibank': return ( ) case 'capitalone': return ( ) case 'svb': return ( ) default: return } } export function BankAccountConnector({ initialBankId, className, onConnect, onCancel, onSelectBank, }: BankAccountConnectorProps) { const [searchQuery, setSearchQuery] = React.useState('') const [selectedBankId, setSelectedBankId] = React.useState(initialBankId ?? null) const [selectedAccountId, setSelectedAccountId] = React.useState('acc-chk-4892') const [isConnecting, setIsConnecting] = React.useState(false) const [isConnected, setIsConnected] = React.useState(false) React.useEffect(() => { if (initialBankId) { setSelectedBankId(initialBankId) } }, [initialBankId]) const filteredInstitutions = React.useMemo(() => { const query = searchQuery.trim().toLowerCase() if (!query) return institutions return institutions.filter((b) => b.name.toLowerCase().includes(query) || b.fullName.toLowerCase().includes(query)) }, [searchQuery]) const activeBank = React.useMemo(() => { if (!selectedBankId) return institutions[0] return ( institutions.find((b) => b.id === selectedBankId) ?? { id: selectedBankId, name: searchQuery ? searchQuery : 'Custom Institution', fullName: 'Financial Institution', tagline: 'Direct Open Banking', } ) }, [selectedBankId, searchQuery]) const selectedAccount = React.useMemo(() => { return accounts.find((a) => a.id === selectedAccountId) ?? accounts[0] }, [selectedAccountId]) function handleSelectBank(bankId: string) { setSelectedBankId(bankId) onSelectBank?.(bankId) } function handleConnect() { if (!selectedBankId) { setSelectedBankId(institutions[0].id) return } setIsConnecting(true) setTimeout(() => { setIsConnecting(false) setIsConnected(true) onConnect?.({ bankId: activeBank.id, bankName: activeBank.name, accountId: selectedAccount.id, accountName: selectedAccount.name, last4: selectedAccount.last4, balance: selectedAccount.balance, }) setTimeout(() => { setIsConnected(false) }, 2500) }, 900) } function handleCancel() { if (selectedBankId && !initialBankId) { setSelectedBankId(null) } onCancel?.() } return ( {/* Step 1: Institution Selection */} {!selectedBankId ? (

{/* Header */}

Connect your bank account

Secure 256-bit encrypted connection powered by open banking.

{/* Search input */}

setSearchQuery(e.target.value)} prefixIcon={} placeholder="Search institutions (e.g. Chase, Wells Fargo)..." className="text-sm" />

{/* Popular Institutions Grid */}

Popular institutions

10,000+ supported

{filteredInstitutions.length > 0 ? (

{filteredInstitutions.map((bank) => ( ))}

) : ( /* Direct search fallback */

No popular bank matched “{searchQuery}”. Connect via direct institution link:

)}

) : ( /* Step 2: Account Selection Step */

{/* Back and Banner Header */}

Step 2 of 2

{/* Bank Banner */}

{activeBank.name} Checking & Savings

Connected

{/* Account Radio Cards */}

Select an account

Choose the primary account to link for transactions and balance tracking.

{accounts.map((account) => { const isSelected = selectedAccountId === account.id return (

setSelectedAccountId(account.id)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() setSelectedAccountId(account.id) } }} >

{/* Custom Radio Indicator */}

{isSelected &&

}

{/* Account Info */}

{account.name} •••• {account.last4} {account.type}

{account.subtitle}

{/* Balance */}

{account.balance}

{account.balanceLabel}

) })}

)} {/* Security Footer */}

Encrypted with AES-256 e.preventDefault()} > Privacy policy

) } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","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/input.json","https://uipkge.dev/r/react/separator.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/bank-account-connector/BankAccountConnector.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/BankAccountConnector.tsx"}],"className":"h-[70svh] min-h-80"}]]}]