Wallet Management

DWallet supports multiple wallets to organize finances across different accounts, cash, and payment methods.

Overview

Users can create and manage multiple wallets, each with:

• Custom name
• Wallet type (Cash, Bank, Mobile Money, Other)
• Custom color
• Balance tracking
• Individual transaction history

Wallet Types

File: packages/dwallet_types/lib/src/abstractions/_enums.dart

enum WalletType {
  cash,
  bank,
  mobileMoney,
  other,
}

Type Characteristics

Type	Icon	Use Case
Cash	💵	Physical cash on hand
Bank	🏦	Bank accounts, savings
Mobile Money	📱	Digital wallets (PayPal, Venmo, etc.)
Other	💼	Custom categories

Data Model

File: packages/dwallet_types/lib/src/abstractions/_wallet.dart

abstract class Wallet {
  String get id;
  double get balance;
  String get name;
  WalletType get type;
  Color get color;
}

WalletModel

class WalletModel implements Wallet {
  final String id;
  final double balance;
  final String name;
  final WalletType type;
  final Color color;

  const WalletModel({
    required this.id,
    this.balance = 0,
    required this.name,
    required this.type,
    required this.color,
  });
}

UI Components

Wallet List View

File: lib/app/pages/client/wallet/wallet_list/wallet_list_view.dart

Displays wallets in a 3D stacked carousel:

StackedCarousel(
  itemCount: wallets.length,
  itemBuilder: (context, index) => WalletCardWidget(
    wallet: wallets[index],
  ),
)

Wallet Card Widget

File: lib/app/widgets/_wallet_card.dart

WalletCardWidget(
  wallet: WalletModel(
    id: '1',
    name: 'Main Account',
    type: WalletType.bank,
    balance: 5000.00,
    color: Colors.blue,
  ),
)

Features:

• Gradient background with wallet color
• Wallet type icon
• Wallet name
• Formatted balance with currency
• Tap to view details

Manage Wallet Modal

File: lib/app/pages/client/components/_manage_wallet_modal_sheet.dart

Bottom sheet for creating/editing wallets:

showModalBottomSheet(
  context: context,
  builder: (_) => ManageWalletModalSheet(
    wallet: existingWallet, // null for new wallet
  ),
);

Fields:

• Wallet name (text input)
• Wallet type (dropdown)
• Color picker (preset colors)

Preset Colors

File: packages/dwallet_types/lib/src/mocks/_wallet.dart

static const List<Color> presetColors = [
  Color(0xFF4F46E5), // Indigo
  Color(0xFFDC2626), // Red
  Color(0xFF059669), // Green
  Color(0xFFD97706), // Amber
  Color(0xFF0891B2), // Cyan
  Color(0xFF7C3AED), // Violet
  Color(0xFFDB2777), // Pink
  Color(0xFF4338CA), // Blue
];

Creating a Wallet

Flow

1. Tap FAB (+) or "Add Wallet" button
2. ManageWalletModalSheet opens
3. User enters name, selects type and color
4. Tap Save
5. Wallet added to list
6. Carousel updates

Code Example

void _createWallet() {
  final newWallet = WalletModel(
    id: DateTime.now().toString(),
    name: _nameController.text,
    type: _selectedType,
    color: _selectedColor,
    balance: 0,
  );

  // Add to wallets list
  wallets.add(newWallet);

  // Save to storage (SharedPreferences or API)
  _saveWallets();
}

Wallet Details

File: lib/app/pages/client/wallet/wallet_details/wallet_details_view.dart

Individual wallet screen showing:

• Wallet header with color and icon
• Current balance
• Transaction history for this wallet
• Edit/Delete options

Navigation

context.router.push(WalletDetailsRoute(walletId: wallet.id));

Customization

Adding New Wallet Types

1. Edit enum in packages/dwallet_types/lib/src/abstractions/_enums.dart:

enum WalletType {
  cash,
  bank,
  mobileMoney,
  other,
  crypto, // Add new type
}

2. Update icon mapping in WalletCardWidget:

IconData getWalletIcon(WalletType type) {
  switch (type) {
    case WalletType.cash: return LucideIcons.banknote;
    case WalletType.bank: return LucideIcons.building2;
    case WalletType.mobileMoney: return LucideIcons.smartphone;
    case WalletType.crypto: return LucideIcons.bitcoin; // Add icon
    default: return LucideIcons.wallet;
  }
}

Custom Color Picker

Replace preset colors in _wallet.dart:

static const List<Color> presetColors = [
  Color(0xFFYourCustomColor1),
  Color(0xFFYourCustomColor2),
  // ... more colors
];

Best Practices

1. Limit wallets: 5-7 wallets maximum for usability
2. Clear naming: Use descriptive names (“Chase Checking”, “Cash Wallet”)
3. Consistent colors: Use same colors for same types
4. Default wallet: Always have at least one wallet
5. Archive option: Don’t delete, archive old wallets
6. Balance updates: Real-time balance calculation

Testing

test('Wallet creation', () {
  final wallet = WalletModel(
    id: '1',
    name: 'Test Wallet',
    type: WalletType.cash,
    color: Colors.blue,
  );

  expect(wallet.name, 'Test Wallet');
  expect(wallet.type, WalletType.cash);
});