feat: Add wallet history to webapp

mobile/native/src/api.rs

@@ -42,6 +42,7 @@ use ln_dlc_node::channel::UserChannelId;
 use rust_decimal::prelude::FromPrimitive;
 use rust_decimal::Decimal;
 use std::backtrace::Backtrace;
+use std::fmt;
 use std::path::PathBuf;
 use time::OffsetDateTime;
 use tokio::sync::broadcast;
@@ -154,6 +155,15 @@ pub enum PaymentFlow {
     Outbound,
 }
 
+impl fmt::Display for PaymentFlow {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        match self {
+            PaymentFlow::Inbound => write!(f, "inbound"),
+            PaymentFlow::Outbound => write!(f, "outbound"),
+        }
+    }
+}
+
 #[derive(Clone, Debug, Default)]
 pub enum Status {
     #[default]

webapp/frontend/lib/common/payment.dart

@@ -0,0 +1,49 @@
+import 'package:get_10101/common/model.dart';
+
+class Payment {
+  final String address;
+  final int amount;
+  final int fee;
+
+  const Payment({required this.address, required this.amount, required this.fee});
+}
+
+enum PaymentFlow { outbound, inbound }
+
+class OnChainPayment {
+  final PaymentFlow flow;
+  final Amount amount;
+  final DateTime timestamp;
+  final String txid;
+  final int confirmations;
+  final Amount? fee;
+
+  const OnChainPayment(
+      {required this.flow,
+      required this.amount,
+      required this.timestamp,
+      required this.txid,
+      required this.confirmations,
+      this.fee});
+
+  factory OnChainPayment.fromJson(Map<String, dynamic> json) {
+    return switch (json) {
+      {
+        "flow": String flow,
+        "amount": int amount,
+        "timestamp": int timestamp,
+        "txid": String txid,
+        "confirmations": int confirmations,
+        "fee": int fee
+      } =>
+        OnChainPayment(
+            flow: flow == 'inbound' ? PaymentFlow.inbound : PaymentFlow.outbound,
+            amount: Amount(amount),
+            timestamp: DateTime.fromMillisecondsSinceEpoch(timestamp * 1000),
+            txid: txid,
+            confirmations: confirmations,
+            fee: Amount(fee)),
+      _ => throw const FormatException('Failed to load history.'),
+    };
+  }
+}

webapp/frontend/lib/wallet/history_screen.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:get_10101/common/payment.dart';
+import 'package:get_10101/wallet/onchain_payment_history_item.dart';
+import 'package:get_10101/wallet/wallet_service.dart';
+import 'package:provider/provider.dart';
+
+class HistoryScreen extends StatefulWidget {
+  const HistoryScreen({super.key});
+
+  @override
+  State<HistoryScreen> createState() => _HistoryScreenState();
+}
+
+class _HistoryScreenState extends State<HistoryScreen> {
+  List<OnChainPayment> history = [];
+
+  @override
+  void initState() {
+    super.initState();
+    context
+        .read<WalletService>()
+        .getOnChainPaymentHistory()
+        .then((value) => setState(() => history = value));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        padding: const EdgeInsets.only(top: 25),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Expanded(
+              child: Column(
+                children: history.map((item) => OnChainPaymentHistoryItem(data: item)).toList(),
+              ),
+            ),
+          ],
+        ));
+  }
+}

webapp/frontend/lib/wallet/onchain_payment_history_item.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:get_10101/common/payment.dart';
+import 'package:intl/intl.dart';
+import 'package:timeago/timeago.dart' as timeago;
+
+class OnChainPaymentHistoryItem extends StatelessWidget {
+  final OnChainPayment data;
+
+  const OnChainPaymentHistoryItem({super.key, required this.data});
+
+  @override
+  Widget build(BuildContext context) {
+    final statusIcon = switch (data.confirmations) {
+      >= 3 => const Icon(Icons.check_circle, color: Colors.green, size: 18),
+      _ => const Icon(Icons.pending, size: 18)
+    };
+
+    String sign = data.flow == PaymentFlow.inbound ? "+" : "-";
+    Color color = data.flow == PaymentFlow.inbound ? Colors.green.shade600 : Colors.red.shade600;
+    final flowIcon = data.flow == PaymentFlow.inbound ? Icons.arrow_downward : Icons.arrow_upward;
+
+    var amountFormatter = NumberFormat.compact(locale: "en_UK");
+
+    return Column(
+      children: [
+        Card(
+          color: Colors.transparent,
+          margin: const EdgeInsets.all(0),
+          elevation: 0,
+          child: ListTile(
+              onTap: () async {
+                // todo
+              },
+              leading: Stack(children: [
+                Container(
+                  padding: const EdgeInsets.only(bottom: 20.0),
+                  child: SizedBox(height: 18, width: 18, child: statusIcon),
+                ),
+                Container(
+                    padding: const EdgeInsets.only(left: 5.0, top: 10.0),
+                    child: SizedBox(height: 30, width: 30, child: Icon(flowIcon, size: 30))),
+              ]),
+              title: RichText(
+                overflow: TextOverflow.ellipsis,
+                text: TextSpan(
+                  style: DefaultTextStyle.of(context).style,
+                  children: const <TextSpan>[
+                    TextSpan(text: "Payment"),
+                  ],
+                ),
+              ),
+              subtitle: RichText(
+                  textWidthBasis: TextWidthBasis.longestLine,
+                  text: TextSpan(style: DefaultTextStyle.of(context).style, children: <TextSpan>[
+                    TextSpan(
+                        text: timeago.format(data.timestamp),
+                        style: const TextStyle(color: Colors.grey)),
+                  ])),
+              trailing: Padding(
+                padding: const EdgeInsets.only(top: 11.0, bottom: 5.0),
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: [
+                    RichText(
+                      text: TextSpan(
+                          style: DefaultTextStyle.of(context).style,
+                          children: <InlineSpan>[
+                            TextSpan(
+                                text: "$sign${amountFormatter.format(data.amount.sats)} sats",
+                                style: TextStyle(
+                                    color: color,
+                                    fontFamily: "Courier",
+                                    fontSize: 14,
+                                    fontWeight: FontWeight.bold))
+                          ]),
+                    ),
+                    RichText(
+                        text: TextSpan(
+                            style: DefaultTextStyle.of(context).style,
+                            children: const <TextSpan>[
+                          TextSpan(text: "on-chain", style: TextStyle(color: Colors.grey)),
+                        ])),
+                  ],
+                ),
+              )),
+        ),
+        const Divider(height: 0, thickness: 0.5, indent: 10, endIndent: 10)
+      ],
+    );
+  }
+}

webapp/frontend/lib/wallet/wallet_screen.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get_10101/common/color.dart';
+import 'package:get_10101/wallet/history_screen.dart';
 import 'package:get_10101/wallet/receive_screen.dart';
 import 'package:get_10101/wallet/send_screen.dart';
 
@@ -14,7 +15,7 @@ class WalletScreen extends StatefulWidget {
 }
 
 class _WalletScreenState extends State<WalletScreen> with SingleTickerProviderStateMixin {
-  late final _tabController = TabController(length: 2, vsync: this);
+  late final _tabController = TabController(length: 3, vsync: this);
 
   @override
   Widget build(BuildContext context) {
@@ -28,6 +29,15 @@ class _WalletScreenState extends State<WalletScreen> with SingleTickerProviderSt
             unselectedLabelColor: Colors.black,
             labelColor: tenTenOnePurple,
             tabs: const [
+              Tab(
+                  child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Icon(FontAwesomeIcons.clockRotateLeft, size: 20),
+                  SizedBox(width: 10),
+                  Text("History")
+                ],
+              )),
               Tab(
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.center,
@@ -55,7 +65,7 @@ class _WalletScreenState extends State<WalletScreen> with SingleTickerProviderSt
           Expanded(
             child: TabBarView(
               controller: _tabController,
-              children: const [ReceiveScreen(), SendScreen()],
+              children: const [HistoryScreen(), ReceiveScreen(), SendScreen()],
             ),
           ),
         ],

webapp/frontend/lib/wallet/wallet_service.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:get_10101/common/model.dart';
 import 'package:get_10101/common/balance.dart';
+import 'package:get_10101/common/payment.dart';
 import 'package:http/http.dart' as http;
 
 class WalletService {
@@ -64,12 +65,27 @@ class WalletService {
       throw FlutterError("Failed to send payment. $e");
     }
   }
-}
 
-class Payment {
-  final String address;
-  final int amount;
-  final int fee;
+  Future<List<OnChainPayment>> getOnChainPaymentHistory() async {
+    // TODO(holzeis): this should come from the config
+    const port = "3001";
+    const host = "localhost";
+
+    try {
+      final response = await http.get(Uri.http('$host:$port', '/api/history'));
 
-  const Payment({required this.address, required this.amount, required this.fee});
+      if (response.statusCode == 200) {
+        List<OnChainPayment> history = [];
+        Iterable list = json.decode(response.body);
+        for (int i = 0; i < list.length; i++) {
+          history.add(OnChainPayment.fromJson(list.elementAt(i)));
+        }
+        return history;
+      } else {
+        throw FlutterError("Failed to fetch onchain payment history");
+      }
+    } catch (e) {
+      throw FlutterError("Failed to fetch onchain payment history. $e");
+    }
+  }
 }

webapp/frontend/pubspec.yaml

@@ -42,8 +42,9 @@ dependencies:
   font_awesome_flutter: 10.6.0
   qr_flutter: ^4.0.0
   bitcoin_icons: ^0.0.4
-  intl: ^0.19.0
+  intl: ^0.18.0
   decimal: ^2.3.3
+  timeago: ^3.3.0
 
 dev_dependencies:
   flutter_test: