UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Bank Account Connector

blockfinance
Boilerplate repo

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.

Installation

$npx uipkge-ng@latest add bank-account-connector
Manifest:https://uipkge.dev/r/angular/bank-account-connector.jsonInstalls to:src/app/components/blocks/bank-account-connector/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

BankInstitution
interface BankInstitution {
  id: string
  name: string
  fullName: string
  tagline: string
}
BankAccount
interface BankAccount {
  id: string
  name: string
  last4: string
  type: 'Checking' | 'Savings' | 'Credit'
  balance: string
  balanceLabel: string
  subtitle: string
}
BankConnectPayload
interface BankConnectPayload {
  bankId: string
  bankName: string
  accountId: string
  accountName: string
  last4: string
  balance: string
}

npm dependencies

lucide-angular

Files installed (2)

  • src/app/components/blocks/bank-account-connector/bank-account-connector.component.ts20.6 kB
    // Plaid/Tink style bank linking flow: institution search, a popular-banks grid
// (Chase, Bank of America, Wells Fargo, Citibank, Capital One, SVB), account radio
// selection with balances and badges, and an AES-256 security footer. Port of the
// Vue/React block 1:1 — emits `connect` with the linked account payload,
// `cancel` when the flow is abandoned, and `selectBank` on institution pick.
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'
import {
  ArrowLeft,
  Building2,
  CheckCircle2,
  ExternalLink,
  Loader2,
  Lock,
  LucideAngularModule,
  Search,
  Shield,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
import { UiInputComponent } from '@/ui/input/input.component'
import { UiSeparatorComponent } from '@/ui/separator/separator.component'

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 BankConnectPayload {
  bankId: string
  bankName: string
  accountId: string
  accountName: string
  last4: string
  balance: string
}

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',
  },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-bank-icon',
  standalone: true,
  host: { '[attr.class]': '"contents"' },
  template: `
    @if (bankId === 'chase') {
      <svg viewBox="0 0 24 24" class="size-5 shrink-0 text-[#117ACA]" fill="currentColor" aria-hidden="true">
        <path
          d="M12 2.5L7.5 7h4.8L16.2 3.1 12 2.5zm9.5 9.5L17 7.5v4.8l3.9 3.9.6-4.2zm-9.5 9.5L16.5 17h-4.8L7.8 20.9l4.2.6zm-9.5-9.5L7 16.5v-4.8L3.1 7.8 2.5 12z"
        />
      </svg>
    } @else if (bankId === 'bofa') {
      <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="none" aria-hidden="true">
        <rect x="2" y="5" width="8" height="4" rx="1" fill="#E31837" />
        <rect x="2" y="10.5" width="8" height="4" rx="1" fill="#002D62" />
        <rect x="2" y="16" width="8" height="3" rx="0.5" fill="#E31837" />
        <rect x="14" y="5" width="8" height="4" rx="1" fill="#002D62" />
        <rect x="14" y="10.5" width="8" height="4" rx="1" fill="#E31837" />
        <rect x="14" y="16" width="8" height="3" rx="0.5" fill="#002D62" />
      </svg>
    } @else if (bankId === 'wellsfargo') {
      <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="none" aria-hidden="true">
        <rect width="24" height="24" rx="4" fill="#D71E28" />
        <path d="M4 7h2.2l1.6 7 1.8-7h2.1l1.8 7 1.6-7H17.5l-2.6 10h-2.2l-1.8-7-1.8 7H7.1L4 7z" fill="#FFCC00" />
      </svg>
    } @else if (bankId === 'citibank') {
      <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="none" aria-hidden="true">
        <path d="M12 4.5C8 4.5 4.5 6.8 4 9.5h2.5c.5-1.5 3-2.5 5.5-2.5s5 1 5.5 2.5H20c-.5-2.7-4-5-8-5z" fill="#EC111A" />
        <rect x="4" y="11" width="3" height="8" rx="0.5" fill="#003B70" />
        <circle cx="12" cy="15" r="4" fill="#003B70" />
        <rect x="17" y="11" width="3" height="8" rx="0.5" fill="#003B70" />
      </svg>
    } @else if (bankId === 'capitalone') {
      <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="none" aria-hidden="true">
        <rect width="24" height="24" rx="4" fill="#004879" />
        <path d="M3.5 15.5C8 9.5 16 8 20.5 12c-5-2-12-1-15 3.5z" fill="#D03027" />
        <rect x="7" y="9" width="10" height="2" rx="1" fill="#FFFFFF" />
      </svg>
    } @else if (bankId === 'svb') {
      <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="none" aria-hidden="true">
        <rect width="24" height="24" rx="4" fill="#005587" />
        <path d="M6 15l6-9 6 9-3 1.5-3-4.5-3 4.5L6 15z" fill="#FFFFFF" />
        <path d="M9 16.5l3-4.5 3 4.5-3 1.5-3-1.5z" fill="#00A3E0" />
      </svg>
    } @else {
      <lucide-icon [img]="Building2" class="text-muted-foreground size-5" />
    }
  `,
  imports: [LucideAngularModule],
})
class UiBankIconComponent {
  @Input() bankId = ''
  protected readonly Building2 = Building2
}

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-bank-account-connector, [ui-bank-account-connector]',
  standalone: true,
  // The block renders its own root card: keep the host out of layout.
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiBadgeComponent,
    UiBankIconComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiInputComponent,
    UiSeparatorComponent,
  ],
  template: `
    <div ui-card data-slot="bank-account-connector" [class]="rootClass">
      <div ui-card-content class="space-y-5 p-6">
        <!-- Step 1: Institution Selection -->
        @if (!selectedBankId()) {
          <div class="space-y-5">
            <!-- Header -->
            <div class="flex items-start gap-3.5">
              <div
                class="bg-success/10 text-success ring-success/5 dark:bg-success/10 text-success flex size-10 shrink-0 items-center justify-center rounded-full ring-4"
              >
                <lucide-icon [img]="Shield" class="size-5" />
              </div>
              <div class="min-w-0 space-y-1">
                <h3 class="text-foreground text-base leading-tight font-semibold tracking-tight">
                  Connect your bank account
                </h3>
                <p class="text-muted-foreground text-xs">
                  Secure 256-bit encrypted connection powered by open banking.
                </p>
              </div>
            </div>

            <!-- Search input -->
            <div class="relative">
              <lucide-icon
                [img]="Search"
                class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
              />
              <ui-input
                [value]="searchQuery()"
                (valueChange)="searchQuery.set($event)"
                placeholder="Search institutions (e.g. Chase, Wells Fargo)..."
                class="pl-9 text-sm"
              />
            </div>

            <!-- Popular Institutions Grid -->
            <div class="space-y-2.5">
              <div class="flex items-center justify-between">
                <p class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Popular institutions</p>
                <span class="text-muted-foreground text-xs">10,000+ supported</span>
              </div>

              @if (filteredInstitutions().length > 0) {
                <div class="grid grid-cols-2 gap-2.5 sm:grid-cols-3">
                  @for (bank of filteredInstitutions(); track bank.id) {
                    <button
                      type="button"
                      class="group border-border bg-card hover:border-primary/40 hover:bg-muted/40 focus-visible:ring-ring flex flex-col items-center justify-center rounded-xl border p-3.5 text-center transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
                      (click)="handleSelectBank(bank.id)"
                    >
                      <div
                        class="border-border/60 bg-muted/60 dark:bg-muted/30 mb-2 flex size-10 items-center justify-center rounded-lg border shadow-xs transition-transform group-hover:scale-105"
                      >
                        <ui-bank-icon [bankId]="bank.id" />
                      </div>

                      <span class="text-foreground w-full truncate text-xs font-semibold">{{ bank.name }}</span>
                      <span class="text-muted-foreground mt-0.5 w-full truncate text-xs">{{ bank.tagline }}</span>
                    </button>
                  }
                </div>
              } @else {
                <!-- Direct search fallback for non-popular queries -->
                <div class="border-border rounded-xl border border-dashed p-4 text-center">
                  <p class="text-muted-foreground mb-2 text-xs">
                    No popular bank matched &ldquo;{{ searchQuery() }}&rdquo;. Connect via direct institution link:
                  </p>
                  <button ui-button size="sm" variant="outline" class="gap-1.5 text-xs" (click)="connectDirect()">
                    <lucide-icon [img]="Building2" class="text-muted-foreground size-3.5" />
                    Connect with {{ searchQuery() }}
                  </button>
                </div>
              }
            </div>
          </div>
        } @else {
          <!-- Step 2: Account Selection Step -->
          <div class="space-y-5">
            <!-- Back and Banner Header -->
            <div class="space-y-3">
              <div class="flex items-center justify-between">
                <button
                  ui-button
                  variant="ghost"
                  size="sm"
                  class="text-muted-foreground hover:text-foreground -ml-2 h-7 gap-1 px-2 text-xs"
                  (click)="selectedBankId.set(null)"
                >
                  <lucide-icon [img]="ArrowLeft" class="size-3.5" />
                  Back to banks
                </button>
                <span class="text-muted-foreground font-mono text-xs">Step 2 of 2</span>
              </div>

              <!-- Bank Banner -->
              <div class="border-border bg-muted/40 flex items-center justify-between rounded-xl border p-3.5">
                <div class="flex min-w-0 items-center gap-3">
                  <div
                    class="border-border/80 bg-background flex size-10 shrink-0 items-center justify-center rounded-lg border shadow-xs"
                  >
                    <ui-bank-icon [bankId]="activeBank().id" />
                  </div>

                  <div class="min-w-0">
                    <p class="text-foreground truncate text-sm font-semibold">
                      {{ activeBank().name }} Checking &amp; Savings
                    </p>
                    <div class="mt-0.5 flex items-center gap-1.5">
                      <span class="bg-success size-1.5 animate-pulse rounded-full"></span>
                      <span class="text-success text-xs font-medium">Connected</span>
                    </div>
                  </div>
                </div>

                <button
                  ui-button
                  variant="ghost"
                  size="sm"
                  class="text-muted-foreground hover:text-foreground h-7 shrink-0 text-xs"
                  (click)="selectedBankId.set(null)"
                >
                  Change
                </button>
              </div>
            </div>

            <!-- Account Radio Cards -->
            <div class="space-y-2.5">
              <div class="space-y-1">
                <h4 class="text-foreground text-sm font-semibold">Select an account</h4>
                <p class="text-muted-foreground text-xs">
                  Choose the primary account to link for transactions and balance tracking.
                </p>
              </div>

              <div role="radiogroup" aria-label="Bank accounts" class="space-y-2">
                @for (account of bankAccounts; track account.id) {
                  <div
                    role="radio"
                    [attr.aria-checked]="selectedAccountId() === account.id"
                    tabindex="0"
                    [class]="accountCardClass(account.id)"
                    (click)="selectedAccountId.set(account.id)"
                    (keydown.enter)="selectedAccountId.set(account.id)"
                    (keydown.space)="selectedAccountId.set(account.id); $event.preventDefault()"
                  >
                    <div class="flex min-w-0 items-center gap-3">
                      <!-- Custom Radio Indicator -->
                      <div [class]="radioClass(account.id)">
                        @if (selectedAccountId() === account.id) {
                          <div class="bg-primary-foreground size-1.5 rounded-full"></div>
                        }
                      </div>

                      <!-- Account Info -->
                      <div class="min-w-0 space-y-0.5">
                        <div class="flex flex-wrap items-center gap-2">
                          <span class="text-foreground truncate text-sm font-medium">{{ account.name }}</span>
                          <span class="text-muted-foreground font-mono text-xs">•••• {{ account.last4 }}</span>
                          <span
                            ui-badge
                            [variant]="account.type === 'Credit' ? 'outline' : 'secondary'"
                            class="h-5 px-2 py-0 text-xs font-normal"
                          >
                            {{ account.type }}
                          </span>
                        </div>
                        <p class="text-muted-foreground text-xs">{{ account.subtitle }}</p>
                      </div>
                    </div>

                    <!-- Balance -->
                    <div class="shrink-0 pl-3 text-right">
                      <div class="text-foreground font-mono text-sm font-semibold tabular-nums">
                        {{ account.balance }}
                      </div>
                      <div class="text-muted-foreground text-xs">{{ account.balanceLabel }}</div>
                    </div>
                  </div>
                }
              </div>
            </div>
          </div>
        }

        <!-- Security Footer -->
        <div class="space-y-4 pt-2">
          <ui-separator />

          <div class="flex flex-wrap items-center justify-between gap-2">
            <span
              ui-badge
              variant="outline"
              class="text-muted-foreground border-border/80 gap-1.5 py-1 text-xs font-normal"
            >
              <lucide-icon [img]="Lock" class="text-success size-3 shrink-0" />
              <span>Encrypted with AES-256</span>
            </span>

            <a
              href="#"
              class="text-muted-foreground hover:text-foreground flex min-h-6 items-center gap-1 text-xs underline underline-offset-4 transition-colors"
              (click)="$event.preventDefault()"
            >
              Privacy policy
              <lucide-icon [img]="ExternalLink" class="size-3" />
            </a>
          </div>

          <div class="flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:items-center sm:justify-end">
            <button
              ui-button
              variant="ghost"
              size="sm"
              class="text-muted-foreground hover:text-foreground h-9 text-xs"
              (click)="handleCancel()"
            >
              Cancel
            </button>
            <button
              ui-button
              size="sm"
              class="h-9 text-xs font-medium"
              [disabled]="isConnecting() || isConnected()"
              (click)="handleConnect()"
            >
              @if (isConnecting()) {
                <lucide-icon [img]="Loader2" class="mr-1.5 size-3.5 animate-spin" />
                <span>Connecting…</span>
              } @else if (isConnected()) {
                <lucide-icon [img]="CheckCircle2" class="text-success mr-1.5 size-3.5" />
                <span>Account Connected!</span>
              } @else if (!selectedBankId()) {
                <span>Continue</span>
              } @else {
                <span>Connect Selected Account</span>
              }
            </button>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class UiBankAccountConnectorComponent {
  protected readonly ArrowLeft = ArrowLeft
  protected readonly Building2 = Building2
  protected readonly CheckCircle2 = CheckCircle2
  protected readonly ExternalLink = ExternalLink
  protected readonly Loader2 = Loader2
  protected readonly Lock = Lock
  protected readonly Search = Search
  protected readonly Shield = Shield
  protected readonly bankAccounts = accounts

  @Input() set initialBankId(v: string | undefined) {
    this.initialBankIdValue = v ?? null
    if (v) this.selectedBankId.set(v)
  }
  @Input('class') className?: string

  @Output() readonly connect = new EventEmitter<BankConnectPayload>()
  @Output() readonly cancel = new EventEmitter<void>()
  @Output() readonly selectBank = new EventEmitter<string>()

  private initialBankIdValue: string | null = null

  readonly searchQuery = signal('')
  readonly selectedBankId = signal<string | null>(null)
  readonly selectedAccountId = signal('acc-chk-4892')
  readonly isConnecting = signal(false)
  readonly isConnected = signal(false)

  readonly filteredInstitutions = computed(() => {
    const query = this.searchQuery().trim().toLowerCase()
    if (!query) return institutions
    return institutions.filter((b) => b.name.toLowerCase().includes(query) || b.fullName.toLowerCase().includes(query))
  })

  readonly activeBank = computed<BankInstitution>(() => {
    const id = this.selectedBankId()
    if (!id) return institutions[0]!
    return (
      institutions.find((b) => b.id === id) ?? {
        id,
        name: this.searchQuery() ? this.searchQuery() : 'Custom Institution',
        fullName: 'Financial Institution',
        tagline: 'Direct Open Banking',
      }
    )
  })

  readonly selectedAccount = computed<BankAccount>(() => {
    return accounts.find((a) => a.id === this.selectedAccountId()) ?? accounts[0]!
  })

  get rootClass(): string {
    return cn('mx-auto w-full max-w-lg overflow-hidden border shadow-sm', this.className)
  }

  accountCardClass(accountId: string): string {
    const isSelected = this.selectedAccountId() === accountId
    return cn(
      'group focus-visible:ring-ring relative flex cursor-pointer items-center justify-between rounded-xl border p-3.5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
      isSelected
        ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'
        : 'border-border bg-card hover:border-border/80 hover:bg-muted/30',
    )
  }

  radioClass(accountId: string): string {
    const isSelected = this.selectedAccountId() === accountId
    return cn(
      'flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors',
      isSelected
        ? 'border-primary bg-primary text-primary-foreground'
        : 'border-muted-foreground/30 bg-background group-hover:border-muted-foreground/60',
    )
  }

  handleSelectBank(bankId: string): void {
    this.selectedBankId.set(bankId)
    this.selectBank.emit(bankId)
  }

  connectDirect(): void {
    this.handleSelectBank(this.searchQuery().toLowerCase().replace(/\s+/g, '-'))
  }

  handleConnect(): void {
    if (!this.selectedBankId()) {
      this.selectedBankId.set(institutions[0]!.id)
      return
    }

    this.isConnecting.set(true)
    setTimeout(() => {
      this.isConnecting.set(false)
      this.isConnected.set(true)
      const bank = this.activeBank()
      const account = this.selectedAccount()
      this.connect.emit({
        bankId: bank.id,
        bankName: bank.name,
        accountId: account.id,
        accountName: account.name,
        last4: account.last4,
        balance: account.balance,
      })
      setTimeout(() => {
        this.isConnected.set(false)
      }, 2500)
    }, 900)
  }

  handleCancel(): void {
    if (this.selectedBankId() && !this.initialBankIdValue) {
      this.selectedBankId.set(null)
    }
    this.cancel.emit()
  }
}
  • src/app/components/blocks/bank-account-connector/index.ts0.2 kB

Raw manifest:https://uipkge.dev/r/angular/bank-account-connector.json