feat: implement comprehensive ckBTC collateral support in frontend

[bankamitesh]

🎯 Summary

Implements comprehensive frontend support for ckBTC as a collateral option alongside ICP, enabling users to create and manage vaults with Bitcoin-backed collateral.

🔧 Major Changes

Type System & Infrastructure

• ✅ CollateralType Enum: Added ICP and CkBTC support
• ✅ Interface Updates: Enhanced all vault-related types (VaultDTO, CandidVault, ProtocolStatusDTO)
• ✅ Price Service: Real-time ckBTC price fetching from backend logs/metrics
• ✅ Configuration: ckBTC ledger canister integration

UI Components Enhanced

• ✅ CreateVault: Collateral type selector with dynamic pricing and validation
• ✅ VaultCard: Multi-collateral display with correct precision and symbols
• ✅ ProtocolStats: Combined TVL, dual price feeds, comprehensive metrics
• ✅ Responsive Design: All calculations adapt to selected collateral type

Wallet & API Integration

• ✅ Wallet Operations: ckBTC allowance checking and approval flows
• ✅ API Client: Multi-collateral vault creation with CreateVaultParams
• ✅ Balance Management: ckBTC balance fetching and validation
• ✅ Error Handling: Type-aware error messages and validation

🧪 Testing Status

• ✅ Build: Code compiles successfully
• ✅ Linting: No linter errors
• ✅ Type Safety: Full TypeScript compliance
• ✅ Backward Compatibility: ICP functionality completely preserved

⚠️ CRITICAL Risks & Assumptions

🚨 HIGH RISK - Backend Dependencies

Missing Backend Components

// ❌ CRITICAL: These don't exist yet in backend
fetch_ckbtc_rate()           // Called but not implemented
CollateralType enum          // Used but not defined  
ckbtc_margin_amount field    // Expected but missing
open_vault(amount, type)     // Signature mismatch

Backend Requirements

• 🚨 CollateralType enum must be defined in vault.rs
• 🚨 fetch_ckbtc_rate() function must be implemented in xrc.rs
• 🚨 Candid interface (.did) must be updated with ckBTC fields
• 🚨 Vault struct needs ckbtc_margin_amount field
• 🚨 ProtocolStatus needs ckBTC tracking fields

⚠️ MEDIUM RISK - Configuration

ckBTC Ledger ID

// ⚠️ NEEDS VERIFICATION
CKBTC_LEDGER: "mxzaz-hqaaa-aaaar-qaada-cai" // Placeholder ID

• Status: Using placeholder canister ID
• Required: Real mainnet ckBTC ledger ID verification

🔄 Integration Status

Component	Frontend	Backend	Status
Types	✅ Complete	❌ Missing	🚨 Blocked
Price Feed	✅ Complete	❌ Missing	🚨 Blocked
Vault Creation	✅ Complete	❌ Incomplete	🚨 Blocked
Display	✅ Complete	⚠️ Partial	✅ Works

🎯 Current Functionality

✅ Working Now

• ICP vault operations (100% preserved)
• ckBTC UI components and display logic
• Multi-collateral price display
• Type-safe frontend architecture

🚨 Blocked Until Backend Complete

• ckBTC vault creation
• ckBTC price fetching
• ckBTC balance operations
• End-to-end ckBTC workflows

📝 Files Modified

Frontend Changes (9 files):
├── types.ts # Core type definitions
├── priceService.ts # ckBTC price fetching
├── apiClient.ts # Multi-collateral vault ops
├── walletOperations.ts # ckBTC wallet integration
├── config.ts # ckBTC ledger configuration
├── CreateVault.svelte # Collateral type selection
├── VaultCard.svelte # Multi-collateral display
├── ProtocolStats.svelte # Combined metrics dashboard
└── queryOperations.ts # Protocol status handling

🚀 Deployment Strategy

1. Phase 1: Deploy frontend (safe - ICP preserved, ckBTC degrades gracefully)
2. Phase 2: Complete backend ckBTC implementation
3. Phase 3: Verify ckBTC ledger configuration
4. Phase 4: Enable ckBTC vault creation

🎯 Business Impact

• ✅ Immediate: Enhanced UI, better architecture, ICP preserved
• 🔄 Future: Full Bitcoin DeFi integration once backend complete
• 📈 Potential: Significant TVL increase from Bitcoin holders