{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bank-account-connector", "title": "Bank Account Connector", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/bank-account-connector/BankAccountConnector.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowLeft, Building2, CheckCircle2, ExternalLink, Loader2, Lock, Search, Shield } 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 { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface BankInstitution {\n id: string\n name: string\n fullName: string\n tagline: string\n}\n\nexport interface BankAccount {\n id: string\n name: string\n last4: string\n type: 'Checking' | 'Savings' | 'Credit'\n balance: string\n balanceLabel: string\n subtitle: string\n}\n\nexport interface ConnectPayload {\n bankId: string\n bankName: string\n accountId: string\n accountName: string\n last4: string\n balance: string\n}\n\nexport interface BankAccountConnectorProps {\n initialBankId?: string\n className?: string\n onConnect?: (payload: ConnectPayload) => void\n onCancel?: () => void\n onSelectBank?: (bankId: string) => void\n}\n\nconst institutions: BankInstitution[] = [\n { id: 'chase', name: 'Chase', fullName: 'JPMorgan Chase Bank', tagline: 'Checking, Savings & Credit' },\n { id: 'bofa', name: 'Bank of America', fullName: 'Bank of America N.A.', tagline: 'Advantage Banking' },\n { id: 'wellsfargo', name: 'Wells Fargo', fullName: 'Wells Fargo Bank', tagline: 'Everyday & Way2Save' },\n { id: 'citibank', name: 'Citibank', fullName: 'Citibank N.A.', tagline: 'Citi Priority & Access' },\n { id: 'capitalone', name: 'Capital One', fullName: 'Capital One Bank', tagline: '360 Checking & Savings' },\n { id: 'svb', name: 'SVB', fullName: 'Silicon Valley Bank', tagline: 'Commercial & Startup Banking' },\n]\n\nconst accounts: BankAccount[] = [\n {\n id: 'acc-chk-4892',\n name: 'Checking',\n last4: '4892',\n type: 'Checking',\n balance: '$14,250.00',\n balanceLabel: 'Available balance',\n subtitle: 'Primary checking account',\n },\n {\n id: 'acc-sav-9210',\n name: 'Savings',\n last4: '9210',\n type: 'Savings',\n balance: '$48,900.00',\n balanceLabel: 'Available balance',\n subtitle: 'High yield savings',\n },\n {\n id: 'acc-crd-1049',\n name: 'Business Credit',\n last4: '1049',\n type: 'Credit',\n balance: '$5,200.00',\n balanceLabel: 'Current balance',\n subtitle: 'Corporate credit line',\n },\n]\n\nfunction BankIcon({ id, className }: { id: string; className?: string }) {\n switch (id) {\n case 'chase':\n return (\n \n \n \n )\n case 'bofa':\n return (\n \n \n \n \n \n \n \n \n )\n case 'wellsfargo':\n return (\n \n \n \n \n )\n case 'citibank':\n return (\n \n \n \n \n \n \n )\n case 'capitalone':\n return (\n \n \n \n \n \n )\n case 'svb':\n return (\n \n \n \n \n \n )\n default:\n return \n }\n}\n\nexport function BankAccountConnector({\n initialBankId,\n className,\n onConnect,\n onCancel,\n onSelectBank,\n}: BankAccountConnectorProps) {\n const [searchQuery, setSearchQuery] = React.useState('')\n const [selectedBankId, setSelectedBankId] = React.useState(initialBankId ?? null)\n const [selectedAccountId, setSelectedAccountId] = React.useState('acc-chk-4892')\n const [isConnecting, setIsConnecting] = React.useState(false)\n const [isConnected, setIsConnected] = React.useState(false)\n\n React.useEffect(() => {\n if (initialBankId) {\n setSelectedBankId(initialBankId)\n }\n }, [initialBankId])\n\n const filteredInstitutions = React.useMemo(() => {\n const query = searchQuery.trim().toLowerCase()\n if (!query) return institutions\n return institutions.filter((b) => b.name.toLowerCase().includes(query) || b.fullName.toLowerCase().includes(query))\n }, [searchQuery])\n\n const activeBank = React.useMemo(() => {\n if (!selectedBankId) return institutions[0]\n return (\n institutions.find((b) => b.id === selectedBankId) ?? {\n id: selectedBankId,\n name: searchQuery ? searchQuery : 'Custom Institution',\n fullName: 'Financial Institution',\n tagline: 'Direct Open Banking',\n }\n )\n }, [selectedBankId, searchQuery])\n\n const selectedAccount = React.useMemo(() => {\n return accounts.find((a) => a.id === selectedAccountId) ?? accounts[0]\n }, [selectedAccountId])\n\n function handleSelectBank(bankId: string) {\n setSelectedBankId(bankId)\n onSelectBank?.(bankId)\n }\n\n function handleConnect() {\n if (!selectedBankId) {\n setSelectedBankId(institutions[0].id)\n return\n }\n\n setIsConnecting(true)\n setTimeout(() => {\n setIsConnecting(false)\n setIsConnected(true)\n onConnect?.({\n bankId: activeBank.id,\n bankName: activeBank.name,\n accountId: selectedAccount.id,\n accountName: selectedAccount.name,\n last4: selectedAccount.last4,\n balance: selectedAccount.balance,\n })\n setTimeout(() => {\n setIsConnected(false)\n }, 2500)\n }, 900)\n }\n\n function handleCancel() {\n if (selectedBankId && !initialBankId) {\n setSelectedBankId(null)\n }\n onCancel?.()\n }\n\n return (\n \n \n {/* Step 1: Institution Selection */}\n {!selectedBankId ? (\n
\n {/* Header */}\n
\n
\n \n
\n
\n

\n Connect your bank account\n

\n

\n Secure 256-bit encrypted connection powered by open banking.\n

\n
\n
\n\n {/* Search input */}\n
\n setSearchQuery(e.target.value)}\n prefixIcon={}\n placeholder=\"Search institutions (e.g. Chase, Wells Fargo)...\"\n className=\"text-sm\"\n />\n
\n\n {/* Popular Institutions Grid */}\n
\n
\n

\n Popular institutions\n

\n 10,000+ supported\n
\n\n {filteredInstitutions.length > 0 ? (\n
\n {filteredInstitutions.map((bank) => (\n handleSelectBank(bank.id)}\n >\n
\n \n
\n {bank.name}\n {bank.tagline}\n \n ))}\n
\n ) : (\n /* Direct search fallback */\n
\n

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

\n handleSelectBank(searchQuery.toLowerCase().replace(/\\s+/g, '-'))}\n >\n \n Connect with {searchQuery}\n \n
\n )}\n
\n
\n ) : (\n /* Step 2: Account Selection Step */\n
\n {/* Back and Banner Header */}\n
\n
\n setSelectedBankId(null)}\n >\n \n Back to banks\n \n Step 2 of 2\n
\n\n {/* Bank Banner */}\n
\n
\n
\n \n
\n\n
\n

\n {activeBank.name} Checking & Savings\n

\n
\n \n Connected\n
\n
\n
\n\n setSelectedBankId(null)}\n >\n Change\n \n
\n
\n\n {/* Account Radio Cards */}\n
\n
\n

Select an account

\n

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

\n
\n\n
\n {accounts.map((account) => {\n const isSelected = selectedAccountId === account.id\n return (\n setSelectedAccountId(account.id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n setSelectedAccountId(account.id)\n }\n }}\n >\n
\n {/* Custom Radio Indicator */}\n \n {isSelected &&
}\n
\n\n {/* Account Info */}\n
\n
\n {account.name}\n •••• {account.last4}\n \n {account.type}\n \n
\n

{account.subtitle}

\n
\n
\n\n {/* Balance */}\n
\n
\n {account.balance}\n
\n
{account.balanceLabel}
\n
\n
\n )\n })}\n
\n
\n \n )}\n\n {/* Security Footer */}\n
\n \n\n
\n \n \n Encrypted with AES-256\n \n\n e.preventDefault()}\n >\n Privacy policy\n \n \n
\n\n
\n \n Cancel\n \n \n {isConnecting ? (\n <>\n \n Connecting…\n \n ) : isConnected ? (\n <>\n \n Account Connected!\n \n ) : !selectedBankId ? (\n 'Continue'\n ) : (\n 'Connect Selected Account'\n )}\n \n
\n
\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/BankAccountConnector.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/input.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Plaid/Tink style bank linking modal and account selector with institution search, popular bank grid (Chase, Bank of America, Wells Fargo, Citibank, Capital One, SVB), account radio selection with balances and badges, and an AES-256 encrypted security footer.", "categories": [ "finance", "dashboard" ] }