init adding the transactions screen

app/lib/models/wallet.dart

@@ -50,3 +50,28 @@ class PkidWallet {
     };
   }
 }
+
+enum TransactionType { Create, Payment, Receive }
+
+class Transaction {
+  Transaction({
+    required this.hash,
+    required this.from,
+    required this.to,
+    required this.asset,
+    required this.amount,
+    // required this.memo, // check how to get it
+    required this.type,
+    required this.status,
+    required this.date,
+  });
+  final String hash;
+  final String from;
+  final String to;
+  final String asset;
+  final String amount;
+  // final String memo;
+  final TransactionType type;
+  final bool status;
+  final String date;
+}

app/lib/screens/wallets/transaction_details.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:threebotlogin/models/wallet.dart';
+import 'package:threebotlogin/widgets/wallets/transaction_details.dart';
+
+class TransactionDetailsScreen extends StatelessWidget {
+  final Transaction transaction;
+
+  const TransactionDetailsScreen({
+    super.key,
+    required this.transaction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Column(
+        children: [
+          Expanded(
+            child: SingleChildScrollView(
+              child: TransactionDetails(
+                transaction: transaction,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

app/lib/screens/wallets/transactions.dart

@@ -0,0 +1,99 @@
+import 'package:flutter/material.dart';
+import 'package:threebotlogin/models/wallet.dart';
+import 'package:threebotlogin/services/stellar_service.dart';
+import 'package:threebotlogin/widgets/wallets/transaction.dart';
+import 'package:threebotlogin/widgets/wallets/vertical_divider.dart';
+import 'package:stellar_flutter_sdk/src/responses/operations/payment_operation_response.dart';
+import 'package:stellar_flutter_sdk/src/responses/operations/path_payment_strict_receive_operation_response.dart';
+
+class WalletTransactionsWidget extends StatefulWidget {
+  const WalletTransactionsWidget({super.key, required this.wallet});
+  final Wallet wallet;
+
+  @override
+  State<WalletTransactionsWidget> createState() =>
+      _WalletTransactionsWidgetState();
+}
+
+class _WalletTransactionsWidgetState extends State<WalletTransactionsWidget> {
+  List<Transaction?> transactions = [];
+  bool loading = true;
+
+  _listTransactions() async {
+    setState(() {
+      loading = true;
+    });
+    final txs = await listTransactions(widget.wallet.stellarSecret);
+    final transactionsList = txs.map((tx) {
+      if (tx is PaymentOperationResponse) {
+        return Transaction(
+            hash: tx.transactionHash!,
+            from: tx.from!.accountId,
+            to: tx.to!.accountId,
+            asset: tx.asset.toString(),
+            amount: tx.amount!,
+            type: TransactionType.Payment,
+            status: tx.transactionSuccessful!,
+            date: tx.createdAt!);
+      } else if (tx is PathPaymentStrictReceiveOperationResponse) {
+        return Transaction(
+            hash: tx.transactionHash!,
+            from: tx.from!,
+            to: tx.to!,
+            asset: tx.asset.toString(),
+            type: TransactionType.Payment,
+            status: tx.transactionSuccessful!,
+            amount: tx.amount!,
+            date: tx.createdAt!);
+      }
+      // TODO: handle creation transaction
+    }).toList();
+    transactions = transactionsList.where((tx) => tx != null).toList();
+    setState(() {
+      loading = false;
+    });
+  }
+
+  @override
+  void initState() {
+    _listTransactions();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // TODO: handle empty transactions
+    Widget mainWidget;
+    if (loading) {
+      mainWidget = Center(
+          child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          const CircularProgressIndicator(),
+          const SizedBox(height: 15),
+          Text(
+            'Loading Transactions...',
+            style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                color: Theme.of(context).colorScheme.onBackground,
+                fontWeight: FontWeight.bold),
+          ),
+        ],
+      ));
+    } else {
+      mainWidget = ListView(
+        children: [
+          for (final tx in transactions)
+            Column(
+              children: [
+                TransactionWidget(transaction: tx!),
+                tx == transactions.last
+                    ? const SizedBox()
+                    : const CustomVerticalDivider()
+              ],
+            )
+        ],
+      );
+    }
+    return mainWidget;
+  }
+}

app/lib/screens/wallets/wallet_details.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:threebotlogin/models/wallet.dart';
-import 'package:threebotlogin/widgets/wallets/transactions.dart';
+import 'package:threebotlogin/screens/wallets/transactions.dart';
 import 'package:threebotlogin/widgets/wallets/wallet_balance.dart';
-import 'package:threebotlogin/widgets/wallets/wallet_details.dart';
+import 'package:threebotlogin/screens/wallets/wallet_info.dart';
 
 class WalletDetailsScreen extends StatefulWidget {
   const WalletDetailsScreen(
@@ -37,7 +37,9 @@ class _WalletDetailsScreenState extends State<WalletDetailsScreen> {
   Widget build(BuildContext context) {
     Widget content;
     if (currentScreenIndex == 1) {
-      content = const WalletTransactionsWidget();
+      content = WalletTransactionsWidget(
+        wallet: widget.wallet,
+      );
     } else if (currentScreenIndex == 2) {
       content = WalletDetailsWidget(
         wallet: widget.wallet,

app/lib/services/stellar_service.dart

@@ -24,3 +24,10 @@ Future<String> getBalanceByClient(Client client) async {
   }
   return '0';
 }
+
+Future<List<OperationResponse>> listTransactions(String secret) async {
+  final client = Client(NetworkType.PUBLIC, secret);
+  final transactions = await client.getTransactions(assetCodeFilter: 'TFT');
+  print(transactions);
+  return transactions;
+}

app/lib/widgets/wallets/arrow_inward.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'dart:math' as math;
+
+class ArrowInward extends StatelessWidget {
+  const ArrowInward({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Transform.rotate(
+      angle: 180 * math.pi / 180,
+      child: Icon(
+        Icons.arrow_outward,
+        color: Theme.of(context).colorScheme.onPrimary,
+      ),
+    );
+  }
+}

app/lib/widgets/wallets/transaction.dart

@@ -0,0 +1,109 @@
+import 'package:flutter/material.dart';
+import 'package:threebotlogin/models/wallet.dart';
+import 'package:threebotlogin/screens/wallets/transaction_details.dart';
+import 'package:threebotlogin/widgets/wallets/arrow_inward.dart';
+
+class TransactionWidget extends StatelessWidget {
+  final Transaction transaction;
+
+  const TransactionWidget({
+    super.key,
+    required this.transaction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        Navigator.push(
+          context,
+          MaterialPageRoute(
+            builder: (context) => TransactionDetailsScreen(
+              transaction: transaction,
+            ),
+          ),
+        );
+      },
+      child: Container(
+        padding: const EdgeInsets.all(16),
+        child: Row(
+          children: [
+            CircleAvatar(
+              backgroundColor: transaction.type == TransactionType.Receive
+                  ? Theme.of(context).colorScheme.primary
+                  : Theme.of(context).colorScheme.error,
+              child: transaction.type == TransactionType.Receive
+                  ? const ArrowInward()
+                  : Icon(
+                      Icons.arrow_outward,
+                      color: Theme.of(context).colorScheme.onError,
+                    ),
+            ),
+            const SizedBox(width: 8),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(transaction.hash,
+                      overflow: TextOverflow.ellipsis,
+                      style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                          color: Theme.of(context).colorScheme.onBackground)),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Expanded(
+                        child: Text(
+                            'TFT ${double.parse(transaction.amount).toStringAsFixed(2)}',
+                            overflow: TextOverflow.ellipsis,
+                            style: Theme.of(context)
+                                .textTheme
+                                .bodyMedium!
+                                .copyWith(
+                                  color: transaction.type ==
+                                          TransactionType.Receive
+                                      ? Theme.of(context).colorScheme.primary
+                                      : Theme.of(context).colorScheme.error,
+                                )),
+                      ),
+                      Text(
+                          DateTime.parse(transaction.date).toLocal().toString(),
+                          overflow: TextOverflow.ellipsis,
+                          style: Theme.of(context)
+                              .textTheme
+                              .bodyMedium!
+                              .copyWith(
+                                  color: Theme.of(context)
+                                      .colorScheme
+                                      .onBackground)),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(width: 8),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+              decoration: BoxDecoration(
+                // color: status == 'Successful'
+                //     ? Theme.of(context).colorScheme.primary
+                //     : Theme.of(context).colorScheme.error,
+                border: Border.all(
+                  color: transaction.status
+                      ? Theme.of(context).colorScheme.primary
+                      : Theme.of(context).colorScheme.error,
+                ),
+                borderRadius: BorderRadius.circular(20),
+              ),
+              child: Text(transaction.status ? 'Successful' : 'Failed',
+                  style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                        color: transaction.status
+                            ? Theme.of(context).colorScheme.primary
+                            : Theme.of(context).colorScheme.error,
+                      )),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}