ledger top up functionality and few small fixes for project architechture and design

2026-03-05 21:49:23 +03:00
parent 39c04beb21
commit 97b16542c2
41 changed files with 764 additions and 455 deletions
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/balance_item.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/balance_item.dart
@@ -1,21 +0,0 @@
-import 'package:pshared/models/ledger/account.dart';
-import 'package:pshared/models/payment/wallet.dart';
-
-
-enum BalanceItemType { wallet, ledger, addAction }
-
-class BalanceItem {
-  final BalanceItemType type;
-  final Wallet? wallet;
-  final LedgerAccount? account;
-
-  const BalanceItem.wallet(this.wallet) : type = BalanceItemType.wallet, account = null;
-
-  const BalanceItem.ledger(this.account) : type = BalanceItemType.ledger, wallet = null;
-
-  const BalanceItem.addAction() : type = BalanceItemType.addAction, wallet = null, account = null;
-
-  bool get isWallet => type == BalanceItemType.wallet;
-  bool get isLedger => type == BalanceItemType.ledger;
-  bool get isAdd => type == BalanceItemType.addAction;
-}
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/card.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/card.dart
@@ -1,17 +1,8 @@
 import 'package:flutter/material.dart';

-import 'package:provider/provider.dart';
-
-import 'package:pshared/controllers/balance_mask/wallets.dart';
 import 'package:pshared/models/payment/wallet.dart';
-import 'package:pshared/models/payment/chain_network.dart';
-import 'package:pshared/utils/l10n/chain.dart';

-import 'package:pweb/pages/dashboard/buttons/balance/add_funds.dart';
-import 'package:pweb/pages/dashboard/buttons/balance/amount.dart';
-import 'package:pweb/pages/dashboard/buttons/balance/config.dart';
-import 'package:pweb/pages/dashboard/buttons/balance/header.dart';
-import 'package:pweb/widgets/refresh_balance/wallet.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/source/card.dart';


 class WalletCard extends StatelessWidget {
@@ -28,56 +19,10 @@ class WalletCard extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final networkLabel = (wallet.network == null || wallet.network == ChainNetwork.unspecified)
-      ? null
-      : wallet.network!.localizedName(context);
-    final symbol = wallet.tokenSymbol?.trim();
-
-    return Card(
-      color: Theme.of(context).colorScheme.onSecondary,
-      elevation: WalletCardConfig.elevation,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(WalletCardConfig.borderRadius),
-      ),
-      child: InkWell(
-        borderRadius: BorderRadius.circular(WalletCardConfig.borderRadius),
-        onTap: onTap,
-        child: SizedBox.expand(
-          child: Padding(
-            padding: WalletCardConfig.contentPadding,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                BalanceHeader(
-                  title: wallet.name,
-                  subtitle: networkLabel,
-                  badge: (symbol == null || symbol.isEmpty) ? null : symbol,
-                ),
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [
-                    BalanceAmount(
-                      wallet: wallet,
-                      onToggleMask: () {
-                        context.read<WalletsController>().toggleBalanceMask(wallet.id);
-                      },
-                    ),
-                    Column(
-                      children: [
-                        WalletBalanceRefreshButton(
-                          walletRef: wallet.id,
-                        ),
-                        BalanceAddFunds(onTopUp: onTopUp),
-                      ],
-                    ),
-                  ],
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
+    return BalanceSourceCard.wallet(
+      wallet: wallet,
+      onTap: onTap,
+      onAddFunds: onTopUp,
    );
  }
 }
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/carousel.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/carousel.dart
@@ -4,18 +4,20 @@ import 'package:flutter/gestures.dart';
 import 'package:pshared/models/ledger/account.dart';
 import 'package:pshared/models/payment/wallet.dart';

+import 'package:pweb/models/dashboard/balance_item.dart';
 import 'package:pweb/pages/dashboard/buttons/balance/add/card.dart';
-import 'package:pweb/pages/dashboard/buttons/balance/balance_item.dart';
 import 'package:pweb/pages/dashboard/buttons/balance/card.dart';
 import 'package:pweb/pages/dashboard/buttons/balance/config.dart';
 import 'package:pweb/pages/dashboard/buttons/balance/indicator.dart';
 import 'package:pweb/pages/dashboard/buttons/balance/ledger.dart';

+
 class BalanceCarousel extends StatefulWidget {
  final List<BalanceItem> items;
  final int currentIndex;
  final ValueChanged<int> onIndexChanged;
  final ValueChanged<Wallet> onTopUp;
+  final ValueChanged<LedgerAccount> onLedgerAddFunds;
  final ValueChanged<Wallet> onWalletTap;
  final ValueChanged<LedgerAccount> onLedgerTap;

@@ -25,6 +27,7 @@ class BalanceCarousel extends StatefulWidget {
    required this.currentIndex,
    required this.onIndexChanged,
    required this.onTopUp,
+    required this.onLedgerAddFunds,
    required this.onWalletTap,
    required this.onLedgerTap,
  });
@@ -101,17 +104,18 @@ class _BalanceCarouselState extends State<BalanceCarousel> {
                itemCount: widget.items.length,
                itemBuilder: (context, index) {
                  final item = widget.items[index];
-                  final Widget card = switch (item.type) {
-                    BalanceItemType.wallet => WalletCard(
-                      wallet: item.wallet!,
-                      onTopUp: () => widget.onTopUp(item.wallet!),
-                      onTap: () => widget.onWalletTap(item.wallet!),
+                  final Widget card = switch (item) {
+                    WalletBalanceItem(:final wallet) => WalletCard(
+                      wallet: wallet,
+                      onTopUp: () => widget.onTopUp(wallet),
+                      onTap: () => widget.onWalletTap(wallet),
                    ),
-                    BalanceItemType.ledger => LedgerAccountCard(
-                      account: item.account!,
-                      onTap: () => widget.onLedgerTap(item.account!),
+                    LedgerBalanceItem(:final account) => LedgerAccountCard(
+                      account: account,
+                      onTap: () => widget.onLedgerTap(account),
+                      onAddFunds: () => widget.onLedgerAddFunds(account),
                    ),
-                    BalanceItemType.addAction => const AddBalanceCard(),
+                    AddBalanceActionItem() => const AddBalanceCard(),
                  };

                  return Padding(
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/controller.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/controller.dart
@@ -3,7 +3,8 @@ import 'package:flutter/foundation.dart';
 import 'package:pshared/controllers/balance_mask/wallets.dart';
 import 'package:pshared/provider/ledger.dart';

-import 'package:pweb/pages/dashboard/buttons/balance/balance_item.dart';
+import 'package:pweb/models/dashboard/balance_item.dart';
+

 class BalanceCarouselController with ChangeNotifier {
  WalletsController? _walletsController;
@@ -73,14 +74,19 @@ class BalanceCarouselController with ChangeNotifier {
  String? _currentWalletRef(List<BalanceItem> items, int index) {
    if (items.isEmpty || index < 0 || index >= items.length) return null;
    final current = items[index];
-    if (!current.isWallet) return null;
-    return current.wallet?.id;
+    return switch (current) {
+      WalletBalanceItem(:final wallet) => wallet.id,
+      _ => null,
+    };
  }

  int? _walletIndexByRef(List<BalanceItem> items, String? walletRef) {
    if (walletRef == null || walletRef.isEmpty) return null;
    final idx = items.indexWhere(
-      (item) => item.isWallet && item.wallet?.id == walletRef,
+      (item) => switch (item) {
+        WalletBalanceItem(:final wallet) => wallet.id == walletRef,
+        _ => false,
+      },
    );
    if (idx < 0) return null;
    return idx;
@@ -97,17 +103,17 @@ class BalanceCarouselController with ChangeNotifier {
    for (var i = 0; i < left.length; i++) {
      final a = left[i];
      final b = right[i];
-      if (a.type != b.type) return false;
+      if (a.runtimeType != b.runtimeType) return false;
      if (_itemIdentity(a) != _itemIdentity(b)) return false;
    }

    return true;
  }

-  String _itemIdentity(BalanceItem item) => switch (item.type) {
-    BalanceItemType.wallet => item.wallet?.id ?? '',
-    BalanceItemType.ledger => item.account?.ledgerAccountRef ?? '',
-    BalanceItemType.addAction => 'add',
+  String _itemIdentity(BalanceItem item) => switch (item) {
+    WalletBalanceItem(:final wallet) => wallet.id,
+    LedgerBalanceItem(:final account) => account.ledgerAccountRef,
+    AddBalanceActionItem() => 'add',
  };

  void _syncSelectedWallet() {
@@ -115,9 +121,8 @@ class BalanceCarouselController with ChangeNotifier {
    if (walletsController == null || _items.isEmpty) return;

    final current = _items[_index];
-    if (!current.isWallet || current.wallet == null) return;
-
-    final wallet = current.wallet!;
+    if (current is! WalletBalanceItem) return;
+    final wallet = current.wallet;
    if (walletsController.selectedWallet?.id == wallet.id) return;
    walletsController.selectWallet(wallet);
  }
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/ledger.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/ledger.dart
@@ -1,133 +1,27 @@
 import 'package:flutter/material.dart';

-import 'package:provider/provider.dart';
-
-import 'package:pshared/controllers/balance_mask/ledger_accounts.dart';
 import 'package:pshared/models/ledger/account.dart';
-import 'package:pshared/utils/currency.dart';
-import 'package:pshared/utils/money.dart';
-
-import 'package:pweb/pages/dashboard/buttons/balance/config.dart';
-import 'package:pweb/pages/dashboard/buttons/balance/header.dart';
-import 'package:pweb/widgets/refresh_balance/ledger.dart';
-
-import 'package:pweb/generated/i18n/app_localizations.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/source/card.dart';


 class LedgerAccountCard extends StatelessWidget {
  final LedgerAccount account;
+  final VoidCallback onAddFunds;
  final VoidCallback? onTap;

-  const LedgerAccountCard({super.key, required this.account, this.onTap});
-
-  String _formatBalance() {
-    final money = account.balance?.balance;
-    if (money == null) return '--';
-
-    final amount = parseMoneyAmount(money.amount, fallback: double.nan);
-    if (amount.isNaN) {
-      return '${money.amount} ${money.currency}';
-    }
-
-    try {
-      final currency = currencyStringToCode(money.currency);
-      final symbol = currencyCodeToSymbol(currency);
-      if (symbol.trim().isEmpty) {
-        return '${amountToString(amount)} ${money.currency}';
-      }
-      return '${amountToString(amount)} $symbol';
-    } catch (_) {
-      return '${amountToString(amount)} ${money.currency}';
-    }
-  }
-
-  String _formatMaskedBalance() {
-    final currency = account.currency.trim();
-    if (currency.isEmpty) return '••••';
-    try {
-      final symbol = currencyCodeToSymbol(currencyStringToCode(currency));
-      if (symbol.trim().isEmpty) {
-        return '•••• $currency';
-      }
-      return '•••• $symbol';
-    } catch (_) {
-      return '•••• $currency';
-    }
-  }
+  const LedgerAccountCard({
+    super.key,
+    required this.account,
+    required this.onAddFunds,
+    this.onTap,
+  });

  @override
  Widget build(BuildContext context) {
-    final textTheme = Theme.of(context).textTheme;
-    final colorScheme = Theme.of(context).colorScheme;
-    final loc = AppLocalizations.of(context)!;
-    final accountName = account.name.trim();
-    final accountCode = account.accountCode.trim();
-    final title = accountName.isNotEmpty ? accountName : loc.paymentTypeLedger;
-    final subtitle = accountCode.isNotEmpty ? accountCode : null;
-    final badge = account.currency.trim().isEmpty
-        ? null
-        : account.currency.toUpperCase();
-
-    return Card(
-      color: colorScheme.onSecondary,
-      elevation: WalletCardConfig.elevation,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(WalletCardConfig.borderRadius),
-      ),
-      child: InkWell(
-        borderRadius: BorderRadius.circular(WalletCardConfig.borderRadius),
-        onTap: onTap,
-        child: Padding(
-          padding: WalletCardConfig.contentPadding,
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              BalanceHeader(title: title, subtitle: subtitle, badge: badge),
-              Row(
-                children: [
-                  Consumer<LedgerBalanceMaskController>(
-                    builder: (context, controller, _) {
-                      final isMasked = controller.isBalanceMasked(
-                        account.ledgerAccountRef,
-                      );
-                      return Row(
-                        children: [
-                          Text(
-                            isMasked
-                                ? _formatMaskedBalance()
-                                : _formatBalance(),
-                            style: textTheme.headlineSmall?.copyWith(
-                              fontWeight: FontWeight.bold,
-                              color: colorScheme.onSurface,
-                            ),
-                          ),
-                          const SizedBox(width: 12),
-                          GestureDetector(
-                            onTap: () => controller.toggleBalanceMask(
-                              account.ledgerAccountRef,
-                            ),
-                            child: Icon(
-                              isMasked
-                                  ? Icons.visibility_off
-                                  : Icons.visibility,
-                              size: 24,
-                              color: colorScheme.onSurface,
-                            ),
-                          ),
-                        ],
-                      );
-                    },
-                  ),
-                  const SizedBox(width: 12),
-                  LedgerBalanceRefreshButton(
-                    ledgerAccountRef: account.ledgerAccountRef,
-                  ),
-                ],
-              ),
-            ],
-          ),
-        ),
-      ),
+    return BalanceSourceCard.ledger(
+      account: account,
+      onTap: onTap ?? () {},
+      onAddFunds: onAddFunds,
    );
  }
 }
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/ledger_amount.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/ledger_amount.dart
@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/controllers/balance_mask/ledger_accounts.dart';
+import 'package:pshared/models/ledger/account.dart';
+
+import 'package:pweb/pages/payout_page/wallet/edit/fields/ledger/balance_formatter.dart';
+
+
+class LedgerBalanceAmount extends StatelessWidget {
+  final LedgerAccount account;
+
+  const LedgerBalanceAmount({super.key, required this.account});
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Consumer<LedgerBalanceMaskController>(
+      builder: (context, controller, _) {
+        final isMasked = controller.isBalanceMasked(account.ledgerAccountRef);
+        final balance = isMasked
+            ? LedgerBalanceFormatter.formatMasked(account)
+            : LedgerBalanceFormatter.format(account);
+
+        return Row(
+          children: [
+            Flexible(
+              child: Text(
+                balance,
+                style: textTheme.headlineSmall?.copyWith(
+                  fontWeight: FontWeight.bold,
+                  color: colorScheme.onSurface,
+                ),
+              ),
+            ),
+            const SizedBox(width: 12),
+            GestureDetector(
+              onTap: () {
+                controller.toggleBalanceMask(account.ledgerAccountRef);
+              },
+              child: Icon(
+                isMasked ? Icons.visibility_off : Icons.visibility,
+                size: 24,
+                color: colorScheme.onSurface,
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/source/actions/ledger.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/source/actions/ledger.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/provider/ledger.dart';
+
+import 'package:pweb/pages/dashboard/buttons/balance/actions/bar.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class LedgerSourceActions extends StatelessWidget {
+  final String ledgerAccountRef;
+  final VoidCallback onAddFunds;
+
+  const LedgerSourceActions({
+    super.key,
+    required this.ledgerAccountRef,
+    required this.onAddFunds,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final ledgerProvider = context.watch<LedgerAccountsProvider>();
+    final loc = AppLocalizations.of(context)!;
+    final isBusy =
+        ledgerProvider.isWalletRefreshing(ledgerAccountRef) ||
+        ledgerProvider.isLoading;
+    final hasTarget = ledgerProvider.accounts.any(
+      (a) => a.ledgerAccountRef == ledgerAccountRef,
+    );
+
+    return BalanceActionsBar(
+      isRefreshBusy: isBusy,
+      canRefresh: hasTarget,
+      onRefresh: () {
+        context.read<LedgerAccountsProvider>().refreshBalance(ledgerAccountRef);
+      },
+      onAddFunds: onAddFunds,
+      refreshLabel: loc.refreshBalance,
+      addFundsLabel: loc.addFunds,
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/source/actions/wallet.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/source/actions/wallet.dart
@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/provider/payment/wallets.dart';
+
+import 'package:pweb/pages/dashboard/buttons/balance/actions/bar.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class WalletSourceActions extends StatelessWidget {
+  final String walletRef;
+  final VoidCallback onAddFunds;
+
+  const WalletSourceActions({
+    super.key,
+    required this.walletRef,
+    required this.onAddFunds,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final walletsProvider = context.watch<WalletsProvider>();
+    final loc = AppLocalizations.of(context)!;
+    final isBusy =
+        walletsProvider.isWalletRefreshing(walletRef) ||
+        walletsProvider.isLoading;
+    final hasTarget = walletsProvider.wallets.any((w) => w.id == walletRef);
+
+    return BalanceActionsBar(
+      isRefreshBusy: isBusy,
+      canRefresh: hasTarget,
+      onRefresh: () {
+        context.read<WalletsProvider>().refreshBalance(walletRef);
+      },
+      onAddFunds: onAddFunds,
+      refreshLabel: loc.refreshBalance,
+      addFundsLabel: loc.addFunds,
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/source/card.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/source/card.dart
@@ -0,0 +1,99 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/controllers/balance_mask/wallets.dart';
+import 'package:pshared/models/ledger/account.dart';
+import 'package:pshared/models/payment/chain_network.dart';
+import 'package:pshared/models/payment/source_type.dart';
+import 'package:pshared/models/payment/wallet.dart';
+import 'package:pshared/utils/l10n/chain.dart';
+
+import 'package:pweb/pages/dashboard/buttons/balance/amount.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/ledger_amount.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/source/actions/ledger.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/source/actions/wallet.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/source/card_layout.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class BalanceSourceCard extends StatelessWidget {
+  final PaymentSourceType _type;
+  final Wallet? _wallet;
+  final LedgerAccount? _ledgerAccount;
+  final VoidCallback onTap;
+  final VoidCallback onAddFunds;
+
+  const BalanceSourceCard.wallet({
+    super.key,
+    required Wallet wallet,
+    required this.onTap,
+    required this.onAddFunds,
+  }) : _type = PaymentSourceType.wallet,
+       _wallet = wallet,
+       _ledgerAccount = null;
+
+  const BalanceSourceCard.ledger({
+    super.key,
+    required LedgerAccount account,
+    required this.onTap,
+    required this.onAddFunds,
+  }) : _type = PaymentSourceType.ledger,
+       _wallet = null,
+       _ledgerAccount = account;
+
+  @override
+  Widget build(BuildContext context) => switch (_type) {
+    PaymentSourceType.wallet => _buildWalletCard(context, _wallet!),
+    PaymentSourceType.ledger => _buildLedgerCard(context, _ledgerAccount!),
+  };
+
+  Widget _buildWalletCard(BuildContext context, Wallet wallet) {
+    final networkLabel =
+        (wallet.network == null || wallet.network == ChainNetwork.unspecified)
+        ? null
+        : wallet.network!.localizedName(context);
+    final symbol = wallet.tokenSymbol?.trim();
+
+    return BalanceSourceCardLayout(
+      title: wallet.name,
+      subtitle: networkLabel,
+      badge: (symbol == null || symbol.isEmpty) ? null : symbol,
+      onTap: onTap,
+      actions: WalletSourceActions(
+        walletRef: wallet.id,
+        onAddFunds: onAddFunds,
+      ),
+      amount: BalanceAmount(
+        wallet: wallet,
+        onToggleMask: () {
+          context.read<WalletsController>().toggleBalanceMask(wallet.id);
+        },
+      ),
+    );
+  }
+
+  Widget _buildLedgerCard(BuildContext context, LedgerAccount account) {
+    final loc = AppLocalizations.of(context)!;
+    final accountName = account.name.trim();
+    final accountCode = account.accountCode.trim();
+    final title = accountName.isNotEmpty ? accountName : loc.paymentTypeLedger;
+    final subtitle = accountCode.isNotEmpty ? accountCode : null;
+    final badge = account.currency.trim().isEmpty
+        ? null
+        : account.currency.toUpperCase();
+
+    return BalanceSourceCardLayout(
+      title: title,
+      subtitle: subtitle,
+      badge: badge,
+      onTap: onTap,
+      actions: LedgerSourceActions(
+        ledgerAccountRef: account.ledgerAccountRef,
+        onAddFunds: onAddFunds,
+      ),
+      amount: LedgerBalanceAmount(account: account),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/source/card_layout.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/source/card_layout.dart
@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/pages/dashboard/buttons/balance/config.dart';
+import 'package:pweb/pages/dashboard/buttons/balance/header.dart';
+
+
+class BalanceSourceCardLayout extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final String? badge;
+  final Widget amount;
+  final Widget actions;
+  final VoidCallback onTap;
+
+  const BalanceSourceCardLayout({
+    super.key,
+    required this.title,
+    required this.subtitle,
+    required this.badge,
+    required this.amount,
+    required this.actions,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Card(
+      color: colorScheme.onSecondary,
+      elevation: WalletCardConfig.elevation,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(WalletCardConfig.borderRadius),
+      ),
+      child: InkWell(
+        borderRadius: BorderRadius.circular(WalletCardConfig.borderRadius),
+        onTap: onTap,
+        child: SizedBox.expand(
+          child: Padding(
+            padding: WalletCardConfig.contentPadding,
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                BalanceHeader(title: title, subtitle: subtitle, badge: badge),
+                Row(
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: [
+                    Expanded(child: amount),
+                    const SizedBox(width: 12),
+                    actions,
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/dashboard/buttons/balance/widget.dart
+++ b/frontend/pweb/lib/pages/dashboard/buttons/balance/widget.dart
@@ -12,15 +12,16 @@ import 'package:pweb/pages/dashboard/buttons/balance/controller.dart';

 import 'package:pweb/generated/i18n/app_localizations.dart';

-
 class BalanceWidget extends StatelessWidget {
  final ValueChanged<Wallet> onTopUp;
+  final ValueChanged<LedgerAccount> onLedgerAddFunds;
  final ValueChanged<Wallet> onWalletTap;
  final ValueChanged<LedgerAccount> onLedgerTap;

  const BalanceWidget({
    super.key,
    required this.onTopUp,
+    required this.onLedgerAddFunds,
    required this.onWalletTap,
    required this.onLedgerTap,
  });
@@ -49,6 +50,7 @@ class BalanceWidget extends StatelessWidget {
      currentIndex: carousel.index,
      onIndexChanged: carousel.onPageChanged,
      onTopUp: onTopUp,
+      onLedgerAddFunds: onLedgerAddFunds,
      onWalletTap: onWalletTap,
      onLedgerTap: onLedgerTap,
    );
--- a/frontend/pweb/lib/pages/dashboard/dashboard.dart
+++ b/frontend/pweb/lib/pages/dashboard/dashboard.dart
@@ -27,6 +27,7 @@ class DashboardPage extends StatefulWidget {
  final ValueChanged<Recipient> onRecipientSelected;
  final void Function(PaymentType type) onGoToPaymentWithoutRecipient;
  final ValueChanged<Wallet> onTopUp;
+  final ValueChanged<LedgerAccount> onLedgerAddFunds;
  final ValueChanged<Wallet> onWalletTap;
  final ValueChanged<LedgerAccount> onLedgerTap;

@@ -35,6 +36,7 @@ class DashboardPage extends StatefulWidget {
    required this.onRecipientSelected,
    required this.onGoToPaymentWithoutRecipient,
    required this.onTopUp,
+    required this.onLedgerAddFunds,
    required this.onWalletTap,
    required this.onLedgerTap,
  });
@@ -90,6 +92,7 @@ class _DashboardPageState extends State<DashboardPage> {
              BalanceWidgetProviders(
                child: BalanceWidget(
                  onTopUp: widget.onTopUp,
+                  onLedgerAddFunds: widget.onLedgerAddFunds,
                  onWalletTap: widget.onWalletTap,
                  onLedgerTap: widget.onLedgerTap,
                ),
--- a/frontend/pweb/lib/pages/dashboard/payouts/amount/feild.dart
+++ b/frontend/pweb/lib/pages/dashboard/payouts/amount/feild.dart
@@ -5,7 +5,6 @@ import 'package:provider/provider.dart';
 import 'package:pshared/utils/currency.dart';

 import 'package:pweb/controllers/payments/amount_field.dart';
-import 'package:pweb/models/payment/amount/mode.dart';
 import 'package:pweb/pages/dashboard/payouts/amount/mode/selector.dart';

 import 'package:pweb/generated/i18n/app_localizations.dart';
--- a/frontend/pweb/lib/pages/dashboard/payouts/multiple/actions.dart
+++ b/frontend/pweb/lib/pages/dashboard/payouts/multiple/actions.dart
@@ -6,7 +6,7 @@ import 'package:pshared/provider/payment/multiple/quotation.dart';

 import 'package:pweb/controllers/payouts/multiple_payouts.dart';
 import 'package:pweb/controllers/payouts/payout_verification.dart';
-import 'package:pweb/utils/payment/payout_verification_flow.dart';
+import 'package:pweb/utils/payment/verification_flow.dart';
 import 'package:pweb/widgets/dialogs/payment_status_dialog.dart';


--- a/frontend/pweb/lib/pages/dashboard/payouts/single/address_book/avatar.dart
+++ b/frontend/pweb/lib/pages/dashboard/payouts/single/address_book/avatar.dart
@@ -23,7 +23,7 @@ class RecipientAvatar extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final textColor = Theme.of(context).colorScheme.onPrimary;
+    final textColor = Theme.of(context).colorScheme.onSecondary;

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
@@ -31,7 +31,7 @@ class RecipientAvatar extends StatelessWidget {
        CircleAvatar(
          radius: avatarRadius,
          backgroundImage: avatarUrl != null ? NetworkImage(avatarUrl!) : null,
-          backgroundColor: Theme.of(context).colorScheme.primary,
+          backgroundColor: Theme.of(context).colorScheme.primaryFixed,
          child: avatarUrl == null
              ? Text(
                  getInitials(name),
--- a/frontend/pweb/lib/pages/dashboard/payouts/single/address_book/short_list.dart
+++ b/frontend/pweb/lib/pages/dashboard/payouts/single/address_book/short_list.dart
@@ -7,54 +7,56 @@ import 'package:pweb/pages/dashboard/payouts/single/address_book/avatar.dart';
 class ShortListAddressBookPayout extends StatelessWidget {
  final List<Recipient> recipients;
  final ValueChanged<Recipient> onSelected;
-  final Widget? trailing;
+  final Widget? leading;

  const ShortListAddressBookPayout({
    super.key,
    required this.recipients,
    required this.onSelected,
-    this.trailing,
+    this.leading,
  });

  static const double _avatarRadius = 20;
  static const double _avatarSize = 80;
-  static const EdgeInsets _padding = EdgeInsets.symmetric(horizontal: 10, vertical: 8);
+  static const EdgeInsets _padding = EdgeInsets.symmetric(
+    horizontal: 10,
+    vertical: 8,
+  );
  static const TextStyle _nameStyle = TextStyle(fontSize: 12);

  @override
  Widget build(BuildContext context) {
-    final trailingWidget = trailing;
+    final leadingWidget = leading;
+    final recipientItems = recipients.map((recipient) {
+      return Padding(
+        padding: _padding,
+        child: InkWell(
+          borderRadius: BorderRadius.circular(5),
+          hoverColor: Theme.of(context).colorScheme.onTertiary,
+          onTap: () => onSelected(recipient),
+          child: SizedBox(
+            height: _avatarSize,
+            width: _avatarSize,
+            child: RecipientAvatar(
+              isVisible: true,
+              name: recipient.name,
+              avatarUrl: recipient.avatarUrl,
+              avatarRadius: _avatarRadius,
+              nameStyle: _nameStyle,
+            ),
+          ),
+        ),
+      );
+    });

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
-        children: 
-        recipients.map((recipient) {
-          return Padding(
-            padding: _padding,
-            child: InkWell(
-              borderRadius: BorderRadius.circular(5),
-              hoverColor: Theme.of(context).colorScheme.primaryContainer,
-              onTap: () => onSelected(recipient),
-              child: SizedBox(
-                height: _avatarSize,
-                width: _avatarSize,
-                child: RecipientAvatar(
-                  isVisible: true,
-                  name: recipient.name,
-                  avatarUrl: recipient.avatarUrl,
-                  avatarRadius: _avatarRadius,
-                  nameStyle: _nameStyle,
-                ),
-              ),
-            ),
-          );
-        }).toList()
-          ..addAll(
-            trailingWidget == null
-                ? const []
-                : [Padding(padding: _padding, child: trailingWidget)],
-          ),
+        children: [
+          if (leadingWidget != null)
+            Padding(padding: _padding, child: leadingWidget),
+          ...recipientItems,
+        ],
      ),
    );
  }
--- a/frontend/pweb/lib/pages/dashboard/payouts/single/address_book/widget.dart
+++ b/frontend/pweb/lib/pages/dashboard/payouts/single/address_book/widget.dart
@@ -21,10 +21,7 @@ import 'package:pweb/generated/i18n/app_localizations.dart';
 class AddressBookPayout extends StatefulWidget {
  final ValueChanged<Recipient> onSelected;

-  const AddressBookPayout({
-    super.key,
-    required this.onSelected,
-  });
+  const AddressBookPayout({super.key, required this.onSelected});

  @override
  State<AddressBookPayout> createState() => _AddressBookPayoutState();
@@ -71,6 +68,7 @@ class _AddressBookPayoutState extends State<AddressBookPayout> {
      provider.setCurrentObject(null);
      context.pushNamed(PayoutRoutes.addRecipient);
    }
+
    final filteredRecipients = filterRecipients(
      recipients: recipients,
      query: _query,
@@ -81,16 +79,18 @@ class _AddressBookPayoutState extends State<AddressBookPayout> {
    }

    if (provider.error != null) {
-      return Center(child: Text(loc.notificationError(provider.error ?? loc.noErrorInformation)));
+      return Center(
+        child: Text(
+          loc.notificationError(provider.error ?? loc.noErrorInformation),
+        ),
+      );
    }

    return SizedBox(
      height: _isExpanded ? _expandedHeight : _collapsedHeight,
      child: Card(
        margin: const EdgeInsets.all(_cardMargin),
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(12),
-        ),
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
        elevation: 4,
        color: Theme.of(context).colorScheme.onSecondary,
        child: Padding(
@@ -105,27 +105,27 @@ class _AddressBookPayoutState extends State<AddressBookPayout> {
              const SizedBox(height: _spacingBetween),
              Expanded(
                child: recipients.isEmpty
-                  ? Center(
-                      child: AddRecipientTile(
-                        label: loc.addRecipient,
-                        onTap: onAddRecipient,
-                      ),
-                    )
-                  : _isExpanded && filteredRecipients.isEmpty
+                    ? Center(
+                        child: AddRecipientTile(
+                          label: loc.addRecipient,
+                          onTap: onAddRecipient,
+                        ),
+                      )
+                    : _isExpanded && filteredRecipients.isEmpty
                    ? AddressBookPlaceholder(text: loc.noRecipientsFound)
                    : _isExpanded
-                      ? LongListAddressBookPayout(
-                          filteredRecipients: filteredRecipients,
-                          onSelected: widget.onSelected,
-                        )
-                      : ShortListAddressBookPayout(
-                          recipients: recipients,
-                          onSelected: widget.onSelected,
-                          trailing: AddRecipientTile(
-                            label: loc.addRecipient,
-                            onTap: onAddRecipient,
-                          ),
+                    ? LongListAddressBookPayout(
+                        filteredRecipients: filteredRecipients,
+                        onSelected: widget.onSelected,
+                      )
+                    : ShortListAddressBookPayout(
+                        recipients: recipients,
+                        onSelected: widget.onSelected,
+                        leading: AddRecipientTile(
+                          label: loc.addRecipient,
+                          onTap: onAddRecipient,
                        ),
+                      ),
              ),
            ],
          ),
--- a/frontend/pweb/lib/pages/payout_page/send/page.dart
+++ b/frontend/pweb/lib/pages/payout_page/send/page.dart
@@ -5,19 +5,21 @@ import 'package:pshared/models/recipient/recipient.dart';

 import 'package:pweb/widgets/sidebar/destinations.dart';
 import 'package:pweb/controllers/payments/page_ui.dart';
-import 'package:pweb/pages/payout_page/send/page_handlers.dart';
+import 'package:pweb/utils/payment/page_handlers.dart';
 import 'package:pweb/pages/payout_page/send/page_view.dart';


 class PaymentPage extends StatefulWidget {
  final ValueChanged<Recipient?>? onBack;
  final PaymentType? initialPaymentType;
+  final String? initialDestinationLedgerAccountRef;
  final PayoutDestination fallbackDestination;

  const PaymentPage({
    super.key,
    this.onBack,
    this.initialPaymentType,
+    this.initialDestinationLedgerAccountRef,
    this.fallbackDestination = PayoutDestination.dashboard,
  });

@@ -34,7 +36,11 @@ class _PaymentPageState extends State<PaymentPage> {
    _uiController = PaymentPageUiController();

    WidgetsBinding.instance.addPostFrameCallback(
-      (_) => initializePaymentPage(context, widget.initialPaymentType),
+      (_) => initializePaymentPage(
+        context,
+        widget.initialPaymentType,
+        destinationLedgerAccountRef: widget.initialDestinationLedgerAccountRef,
+      ),
    );
  }

--- a/frontend/pweb/lib/pages/payout_page/send/page_handlers.dart
+++ b/frontend/pweb/lib/pages/payout_page/send/page_handlers.dart
@@ -1,98 +0,0 @@
-import 'package:flutter/material.dart';
-
-import 'package:go_router/go_router.dart';
-
-import 'package:provider/provider.dart';
-
-import 'package:pshared/models/payment/type.dart';
-import 'package:pshared/models/recipient/recipient.dart';
-import 'package:pshared/provider/payment/flow.dart';
-import 'package:pshared/provider/payment/provider.dart';
-import 'package:pshared/provider/payment/quotation/quotation.dart';
-import 'package:pshared/provider/recipient/provider.dart';
-
-import 'package:pweb/app/router/payout_routes.dart';
-import 'package:pweb/widgets/sidebar/destinations.dart';
-import 'package:pweb/widgets/dialogs/payment_status_dialog.dart';
-import 'package:pweb/controllers/payments/page.dart';
-import 'package:pweb/controllers/payments/page_ui.dart';
-import 'package:pweb/controllers/payouts/payout_verification.dart';
-import 'package:pweb/utils/payment/payout_verification_flow.dart';
-
-void initializePaymentPage(
-  BuildContext context,
-  PaymentType? initialPaymentType,
-) {
-  final flowProvider = context.read<PaymentFlowProvider>();
-  flowProvider.setPreferredType(initialPaymentType);
-}
-
-void handleSearchChanged(PaymentPageUiController uiController, String query) {
-  uiController.setQuery(query);
-}
-
-void handleRecipientSelected(
-  BuildContext context,
-  PaymentPageUiController uiController,
-  Recipient recipient,
-) {
-  final recipientProvider = context.read<RecipientsProvider>();
-  recipientProvider.setCurrentObject(recipient.id);
-  uiController.clearSearch();
-}
-
-void handleRecipientCleared(
-  BuildContext context,
-  PaymentPageUiController uiController,
-) {
-  final recipientProvider = context.read<RecipientsProvider>();
-  recipientProvider.setCurrentObject(null);
-  uiController.clearSearch();
-}
-
-Future<void> handleSendPayment({
-  required State state,
-  required PayoutDestination fallbackDestination,
-}) async {
-  final context = state.context;
-  final paymentProvider = context.read<PaymentProvider>();
-  final quotationProvider = context.read<QuotationProvider>();
-  final controller = context.read<PaymentPageController>();
-  final verificationController = context.read<PayoutVerificationController>();
-  if (paymentProvider.isLoading) return;
-  final verificationContextKey =
-      quotationProvider.quotation?.quoteRef ??
-      quotationProvider.quotation?.idempotencyKey;
-
-  final verified = await runPayoutVerification(
-    context: context,
-    controller: verificationController,
-    contextKey: verificationContextKey,
-  );
-  if (!verified || !state.mounted) return;
-
-  final isSuccess = await controller.sendPayment();
-  if (!state.mounted) return;
-
-  await showPaymentStatusDialog(context, isSuccess: isSuccess);
-  if (!state.mounted) return;
-
-  if (isSuccess) {
-    controller.handleSuccess();
-    context.goToPayout(fallbackDestination);
-  }
-}
-
-void handleAddRecipient(BuildContext context) {
-  final recipients = context.read<RecipientsProvider>();
-  recipients.setCurrentObject(null);
-  context.pushToPayout(PayoutDestination.addrecipient);
-}
-
-void handleAddPaymentMethod(BuildContext context) {
-  final recipients = context.read<RecipientsProvider>();
-  final recipient = recipients.currentObject;
-  if (recipient == null) return;
-  recipients.setCurrentObject(recipient.id);
-  context.pushNamed(PayoutRoutes.editRecipient);
-}
--- a/frontend/pweb/lib/pages/payout_page/send/page_view.dart
+++ b/frontend/pweb/lib/pages/payout_page/send/page_view.dart
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';

 import 'package:pshared/models/recipient/recipient.dart';
+import 'package:pshared/provider/payment/flow.dart';
 import 'package:pshared/provider/payment/quotation/quotation.dart';
 import 'package:pshared/provider/recipient/pmethods.dart';
 import 'package:pshared/provider/recipient/provider.dart';
@@ -14,6 +15,7 @@ import 'package:pweb/controllers/payments/page_ui.dart';
 import 'package:pweb/controllers/payouts/payout_verification.dart';
 import 'package:pweb/models/state/control_state.dart';

+
 class PaymentPageView extends StatelessWidget {
  final PaymentPageUiController uiController;
  final ValueChanged<Recipient?>? onBack;
@@ -47,6 +49,7 @@ class PaymentPageView extends StatelessWidget {
          final uiController = context.watch<PaymentPageUiController>();
          final methodsProvider = context.watch<PaymentMethodsProvider>();
          final recipientProvider = context.watch<RecipientsProvider>();
+          final flowProvider = context.watch<PaymentFlowProvider>();
          final quotationProvider = context.watch<QuotationProvider>();
          final verificationController = context
              .watch<PayoutVerificationController>();
@@ -58,10 +61,12 @@ class PaymentPageView extends StatelessWidget {
            recipients: recipientProvider.recipients,
            query: uiController.query,
          );
+          final hasDestinationSelection =
+              flowProvider.selectedPaymentData != null;
          final sendState =
              verificationController.isCooldownActiveFor(verificationContextKey)
              ? ControlState.disabled
-              : (recipient == null
+              : (!hasDestinationSelection
                    ? ControlState.disabled
                    : ControlState.enabled);

--- a/frontend/pweb/lib/pages/payout_page/send/widgets/payment_info/manual_details.dart
+++ b/frontend/pweb/lib/pages/payout_page/send/widgets/payment_info/manual_details.dart
@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/methods/data.dart';
+import 'package:pshared/models/recipient/payment_method_draft.dart';
+
+import 'package:pweb/pages/address_book/form/widgets/payment_methods/panel.dart';
+import 'package:pweb/pages/payout_page/send/widgets/payment_info/header.dart';
+import 'package:pweb/models/state/control_state.dart';
+import 'package:pweb/models/state/visibility.dart';
+import 'package:pweb/utils/dimensions.dart';
+
+
+class PaymentInfoManualDetailsSection extends StatelessWidget {
+  final AppDimensions dimensions;
+  final String title;
+  final VisibilityState titleVisibility;
+  final PaymentMethodData data;
+
+  const PaymentInfoManualDetailsSection({
+    super.key,
+    required this.dimensions,
+    required this.title,
+    required this.titleVisibility,
+    required this.data,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final entry = RecipientMethodDraft(type: data.type, data: data);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        PaymentInfoHeader(
+          dimensions: dimensions,
+          title: title,
+          visibility: titleVisibility,
+        ),
+        PaymentMethodPanel(
+          selectedType: data.type,
+          selectedIndex: 0,
+          entries: [entry],
+          onRemove: (_) {},
+          onChanged: (_, ignored) {},
+          editState: ControlState.disabled,
+          deleteVisibility: VisibilityState.hidden,
+        ),
+      ],
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payout_page/send/widgets/payment_info/section.dart
+++ b/frontend/pweb/lib/pages/payout_page/send/widgets/payment_info/section.dart
@@ -6,6 +6,7 @@ import 'package:pshared/provider/payment/flow.dart';

 import 'package:pweb/pages/payout_page/send/widgets/payment_info/methods_section.dart';
 import 'package:pweb/pages/payout_page/send/widgets/payment_info/methods_state.dart';
+import 'package:pweb/pages/payout_page/send/widgets/payment_info/manual_details.dart';
 import 'package:pweb/pages/payout_page/send/widgets/payment_info/no_methods.dart';
 import 'package:pweb/pages/payout_page/send/widgets/payment_info/no_recipient.dart';
 import 'package:pweb/models/state/visibility.dart';
@@ -35,8 +36,9 @@ class PaymentInfoSection extends StatelessWidget {
  Widget build(BuildContext context) {
    final loc = AppLocalizations.of(context)!;
    final flowProvider = context.watch<PaymentFlowProvider>();
+    final manualData = flowProvider.manualPaymentData;

-    if (!flowProvider.hasRecipient) {
+    if (!flowProvider.hasRecipient && manualData == null) {
      return PaymentInfoNoRecipientSection(
        dimensions: dimensions,
        title: loc.paymentInfo,
@@ -44,6 +46,15 @@ class PaymentInfoSection extends StatelessWidget {
      );
    }

+    if (!flowProvider.hasRecipient && manualData != null) {
+      return PaymentInfoManualDetailsSection(
+        dimensions: dimensions,
+        title: loc.paymentInfo,
+        titleVisibility: titleVisibility,
+        data: manualData,
+      );
+    }
+
    final methods = flowProvider.methodsForRecipient;
    final types = visiblePaymentTypes;

--- a/frontend/pweb/lib/pages/payout_page/send/widgets/recipient/section.dart
+++ b/frontend/pweb/lib/pages/payout_page/send/widgets/recipient/section.dart
@@ -81,7 +81,7 @@ class RecipientSection extends StatelessWidget {
              ShortListAddressBookPayout(
                recipients: recipientProvider.recipients,
                onSelected: onRecipientSelected,
-                trailing: AddRecipientTile(
+                leading: AddRecipientTile(
                  label: loc.addRecipient,
                  onTap: onAddRecipient,
                ),
--- a/frontend/pweb/lib/pages/payout_page/send/widgets/recipient_details_card.dart
+++ b/frontend/pweb/lib/pages/payout_page/send/widgets/recipient_details_card.dart
@@ -1,6 +1,9 @@
 import 'package:flutter/material.dart';

+import 'package:provider/provider.dart';
+
 import 'package:pshared/models/recipient/recipient.dart';
+import 'package:pshared/provider/payment/flow.dart';
 import 'package:pshared/provider/recipient/provider.dart';

 import 'package:pweb/pages/payout_page/send/widgets/payment_info/section.dart';
@@ -46,24 +49,30 @@ class PaymentRecipientDetailsCard extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final flowProvider = context.watch<PaymentFlowProvider>();
+    final isRecipientSelectionLocked =
+        !flowProvider.hasRecipient && flowProvider.manualPaymentData != null;
+
    return PaymentSectionCard(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
-          RecipientSection(
-            recipient: recipient,
-            dimensions: dimensions,
-            recipientProvider: recipientProvider,
-            searchQuery: searchQuery,
-            filteredRecipients: filteredRecipients,
-            searchController: searchController,
-            searchFocusNode: searchFocusNode,
-            onSearchChanged: onSearchChanged,
-            onRecipientSelected: onRecipientSelected,
-            onRecipientCleared: onRecipientCleared,
-            onAddRecipient: onAddRecipient,
-          ),
-          SizedBox(height: dimensions.paddingMedium),
+          if (!isRecipientSelectionLocked) ...[
+            RecipientSection(
+              recipient: recipient,
+              dimensions: dimensions,
+              recipientProvider: recipientProvider,
+              searchQuery: searchQuery,
+              filteredRecipients: filteredRecipients,
+              searchController: searchController,
+              searchFocusNode: searchFocusNode,
+              onSearchChanged: onSearchChanged,
+              onRecipientSelected: onRecipientSelected,
+              onRecipientCleared: onRecipientCleared,
+              onAddRecipient: onAddRecipient,
+            ),
+            SizedBox(height: dimensions.paddingMedium),
+          ],
          PaymentInfoSection(
            dimensions: dimensions,
            titleVisibility: VisibilityState.hidden,
--- a/frontend/pweb/lib/pages/payout_page/wallet/edit/buttons/top_up.dart
+++ b/frontend/pweb/lib/pages/payout_page/wallet/edit/buttons/top_up.dart
@@ -1,9 +1,13 @@
 import 'package:flutter/material.dart';

+import 'package:go_router/go_router.dart';
+
 import 'package:provider/provider.dart';

 import 'package:pshared/controllers/payment/source.dart';
 import 'package:pshared/models/payment/source_type.dart';
+import 'package:pshared/models/payment/type.dart';
+import 'package:pshared/provider/recipient/provider.dart';

 import 'package:pweb/app/router/payout_routes.dart';

@@ -17,11 +21,35 @@ class TopUpButton extends StatelessWidget {
  Widget build(BuildContext context) {
    final loc = AppLocalizations.of(context)!;
    final source = context.watch<PaymentSourceController>();
-    final canTopUp = source.selectedType == PaymentSourceType.wallet;
+    final selectedType = source.selectedType;
+    final selectedLedger = source.selectedLedgerAccount;
+    final canTopUp =
+        selectedType == PaymentSourceType.wallet ||
+        (selectedType == PaymentSourceType.ledger && selectedLedger != null);

    return ElevatedButton(
      style: ElevatedButton.styleFrom(shadowColor: null, elevation: 0),
-      onPressed: canTopUp ? () => context.pushToWalletTopUp() : null,
+      onPressed: !canTopUp
+          ? null
+          : () {
+              if (selectedType == PaymentSourceType.wallet) {
+                context.pushToWalletTopUp();
+                return;
+              }
+
+              if (selectedType == PaymentSourceType.ledger &&
+                  selectedLedger != null) {
+                context.read<RecipientsProvider>().setCurrentObject(null);
+                context.pushNamed(
+                  PayoutRoutes.payment,
+                  queryParameters: PayoutRoutes.buildQueryParameters(
+                    paymentType: PaymentType.ledger,
+                    destinationLedgerAccountRef:
+                        selectedLedger.ledgerAccountRef,
+                  ),
+                );
+              }
+            },
      child: Text(loc.topUpBalance),
    );
  }