flutter: redesign bmm page

LayerTwo-Labs · Nov 4, 2023 · 950b96c · 950b96c
1 parent 1e2bf1b
commit 950b96c
Show file tree

Hide file tree

Showing 7 changed files with 331 additions and 196 deletions.
diff --git a/lib/pages/tabs/bmm_tab_page.dart b/lib/pages/tabs/bmm_tab_page.dart
diff --git a/lib/pages/tabs/dashboard_tab_page.dart b/lib/pages/tabs/dashboard_tab_page.dart
@@ -194,6 +194,7 @@ class _TxViewState extends State<TxView> {
               });
             },
             child: SingleValueView(
+              width: expanded ? 95 : 70,
               icon: widget.tx.confirmations >= 1
                   ? Tooltip(
                       message: '${widget.tx.confirmations} confirmations',
@@ -209,7 +210,11 @@ class _TxViewState extends State<TxView> {
               trailingText: DateFormat('dd MMM HH:mm').format(widget.tx.time),
             ),
           ),
-          if (expanded) ExpandedTXView(decodedTX: decodedTx),
+          if (expanded)
+            ExpandedTXView(
+              decodedTX: decodedTx,
+              width: 95,
+            ),
         ],
       ),
     );
@@ -232,8 +237,13 @@ class _TxViewState extends State<TxView> {
 
 class ExpandedTXView extends StatelessWidget {
   final Map<String, dynamic> decodedTX;
+  final double width;
 
-  const ExpandedTXView({super.key, required this.decodedTX});
+  const ExpandedTXView({
+    super.key,
+    required this.decodedTX,
+    required this.width,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -242,7 +252,11 @@ class ExpandedTXView extends StatelessWidget {
       mainAxisAlignment: MainAxisAlignment.start,
       crossAxisAlignment: CrossAxisAlignment.start,
       children: decodedTX.keys.where((key) => key != 'walletconflicts').map((key) {
-        return SingleValueView(label: key, value: decodedTX[key]);
+        return SingleValueView(
+          label: key,
+          value: decodedTX[key],
+          width: width,
+        );
       }).toList(),
     );
   }
@@ -251,6 +265,7 @@ class ExpandedTXView extends StatelessWidget {
 class SingleValueView extends StatelessWidget {
   final String label;
   final dynamic value;
+  final double width;
   final String? trailingText;
   final Widget? icon;
   final bool copyable;
@@ -259,6 +274,7 @@ class SingleValueView extends StatelessWidget {
     super.key,
     required this.label,
     required this.value,
+    required this.width,
     this.trailingText,
     this.icon,
     this.copyable = true,
@@ -276,7 +292,7 @@ class SingleValueView extends StatelessWidget {
             width: 13,
           ),
         SizedBox(
-          width: 95,
+          width: width,
           child: SailText.secondary12(label),
         ),
         SailScaleButton(

diff --git a/lib/rpc/rpc_sidechain.dart b/lib/rpc/rpc_sidechain.dart
@@ -338,19 +338,20 @@ class Transaction {
 class BmmResult {
   final String hashLastMainBlock;
 
-  /// hashCreatedMerkleRoot/hashCreated in the testchain codebase
+  // hashCreatedMerkleRoot/hashCreated in the testchain codebase
   final String? bmmBlockCreated;
 
-  /// hashConnected in the testchain codebase
+  // hashConnected in the testchain codebase
   final String? bmmBlockSubmitted;
 
-  /// hashMerkleRoot/hashConnectedBlind in the testchain codebase
+  // hashMerkleRoot/hashConnectedBlind in the testchain codebase
   final String? bmmBlockSubmittedBlind;
 
-  final int ntxn;
-  final int nfees;
-  final String txid;
-  final String? error;
+  final int ntxn; // number of transactions
+  final int nfees; // total fees
+  final String txid; // transaction ID
+  final String? error; // error message, if any
+  final String raw; // raw JSON string
 
   BmmResult({
     required this.hashLastMainBlock,
@@ -361,33 +362,36 @@ class BmmResult {
     required this.nfees,
     required this.txid,
     this.error,
+    required this.raw,
   });
 
-  factory BmmResult.fromJson(Map<String, dynamic> json) {
+  factory BmmResult.fromMap(Map<String, dynamic> map) {
     return BmmResult(
-      hashLastMainBlock: json['hash_last_main_block'],
-      bmmBlockCreated: ifNonEmpty(json['bmm_block_created']),
-      bmmBlockSubmitted: ifNonEmpty(json['bmm_block_submitted']),
-      bmmBlockSubmittedBlind: ifNonEmpty(json['bmm_block_submitted_blind']),
-      ntxn: json['ntxn'],
-      nfees: json['nfees'],
-      txid: json['txid'],
-      error: ifNonEmpty(json['error']),
+      hashLastMainBlock: map['hash_last_main_block'] ?? '',
+      bmmBlockCreated: ifNonEmpty(map['bmm_block_created']),
+      bmmBlockSubmitted: ifNonEmpty(map['bmm_block_submitted']),
+      bmmBlockSubmittedBlind: ifNonEmpty(map['bmm_block_submitted_blind']),
+      ntxn: map['ntxn'] ?? 0,
+      nfees: map['nfees'] ?? 0,
+      txid: map['txid'] ?? '',
+      error: ifNonEmpty(map['error']),
+      raw: jsonEncode(map),
     );
   }
 
-  Map<String, dynamic> toJson() {
-    return {
-      'hash_last_main_block': hashLastMainBlock,
-      'bmm_block_created': bmmBlockCreated,
-      'bmm_block_submitted': bmmBlockSubmitted,
-      'bmm_block_submitted_blind': bmmBlockSubmittedBlind,
-      'ntxn': ntxn,
-      'nfees': nfees,
-      'txid': txid,
-      'error': error,
-    };
-  }
+  static BmmResult fromJson(Map<String, dynamic> json) => BmmResult.fromMap(json);
+  String toJson() => jsonEncode(toMap());
+
+  Map<String, dynamic> toMap() => {
+        'hash_last_main_block': hashLastMainBlock,
+        'bmm_block_created': bmmBlockCreated,
+        'bmm_block_submitted': bmmBlockSubmitted,
+        'bmm_block_submitted_blind': bmmBlockSubmittedBlind,
+        'ntxn': ntxn,
+        'nfees': nfees,
+        'txid': txid,
+        'error': error,
+      };
 }
 
 String? ifNonEmpty(String input) {

diff --git a/packages/sail_ui/assets/svgs/icon_failed.svg b/packages/sail_ui/assets/svgs/icon_failed.svg
diff --git a/packages/sail_ui/lib/widgets/core/sail_svg.dart b/packages/sail_ui/lib/widgets/core/sail_svg.dart
@@ -15,7 +15,8 @@ enum SailSVGAsset {
   iconDropdown,
   iconGlobe,
   iconConfirmed,
-  iconPending
+  iconPending,
+  iconFailed,
 }
 
 /// If you don't want to overwrite the color of the svg, put it in here!
@@ -27,6 +28,7 @@ const coloredAssets = [
   SailSVGAsset.iconSidechain,
   SailSVGAsset.iconConfirmed,
   SailSVGAsset.iconPending,
+  SailSVGAsset.iconFailed,
 ];
 
 class SailSVG {
@@ -90,6 +92,8 @@ extension AsAssetPath on SailSVGAsset {
         return 'assets/svgs/icon_success.svg';
       case SailSVGAsset.iconPending:
         return 'assets/svgs/icon_pending.svg';
+      case SailSVGAsset.iconFailed:
+        return 'assets/svgs/icon_failed.svg';
     }
   }
 }
diff --git a/packages/sail_ui/lib/widgets/inputs/text_field.dart b/packages/sail_ui/lib/widgets/inputs/text_field.dart
@@ -1,40 +1,67 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:sail_ui/sail_ui.dart';
 import 'package:sail_ui/theme/theme.dart';
 import 'package:sail_ui/widgets/core/sail_text.dart';
 
+enum TextFieldSize { small, regular }
+
+enum TextFieldType { number, bitcoin, text }
+
 class SailTextField extends StatelessWidget {
   final TextEditingController controller;
-  final String label;
+  final String? label;
   final String hintText;
+  final String? suffix;
+  final TextFieldType textFieldType;
+  final String? prefix;
+  final TextFieldSize size;
 
   const SailTextField({
     super.key,
     required this.controller,
     required this.label,
     required this.hintText,
+    this.textFieldType = TextFieldType.text,
+    this.suffix,
+    this.prefix,
+    this.size = TextFieldSize.regular,
   });
 
   @override
   Widget build(BuildContext context) {
     final theme = SailTheme.of(context);
+    final padding = size != TextFieldSize.regular
+        ? const EdgeInsets.all(
+            SailStyleValues.padding15,
+          )
+        : const EdgeInsets.symmetric(
+            vertical: SailStyleValues.padding10,
+            horizontal: SailStyleValues.padding15,
+          );
+    final textSize = size == TextFieldSize.regular ? 15.0 : 12.0;
 
     return SailColumn(
       spacing: SailStyleValues.padding08,
       children: [
-        Padding(
-          padding: const EdgeInsets.only(
-            left: 2,
+        if (label != null)
+          Padding(
+            padding: const EdgeInsets.only(
+              left: 2,
+            ),
+            child: SailText.secondary13(label!),
           ),
-          child: SailText.secondary13(label),
-        ),
         TextField(
           cursorColor: SailColorScheme.orange,
           controller: controller,
           style: TextStyle(
             color: SailTheme.of(context).colors.text,
-            fontSize: 15,
+            fontSize: textSize,
           ),
+          inputFormatters: [
+            if (textFieldType == TextFieldType.number) FilteringTextInputFormatter.allow(RegExp(r'^\d+$')),
+            if (textFieldType == TextFieldType.bitcoin) FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,8}')),
+          ],
           decoration: InputDecoration(
             errorBorder: InputBorder.none,
             disabledBorder: InputBorder.none,
@@ -46,19 +73,47 @@ class SailTextField extends StatelessWidget {
               borderRadius: const BorderRadius.all(Radius.circular(6)),
               borderSide: BorderSide(color: theme.colors.formFieldBorder),
             ),
+            suffixStyle: TextStyle(
+              color: SailTheme.of(context).colors.textTertiary,
+              fontSize: textSize,
+            ),
+            suffixText: suffix,
+            prefixStyle: TextStyle(
+              color: SailTheme.of(context).colors.textTertiary,
+              fontSize: textSize,
+            ),
+            prefixText: prefix,
             fillColor: SailTheme.of(context).colors.background,
             filled: true,
+            contentPadding: padding,
+            isDense: true,
             hintText: hintText,
-            contentPadding: const EdgeInsets.all(
-              SailStyleValues.padding15,
-            ),
             hintStyle: TextStyle(
               color: SailTheme.of(context).colors.textTertiary,
-              fontSize: 15,
+              fontSize: textSize,
             ),
           ),
         ),
       ],
     );
   }
+
+  static Widget tiny({
+    required TextEditingController controller,
+    required String hintText,
+    String? label,
+    String? suffix,
+    String? prefix,
+    TextFieldType textFieldType = TextFieldType.text,
+  }) {
+    return SailTextField(
+      controller: controller,
+      label: label,
+      hintText: hintText,
+      suffix: suffix,
+      prefix: prefix,
+      size: TextFieldSize.small,
+      textFieldType: textFieldType,
+    );
+  }
 }
diff --git a/test/mocks/rpc_mock_sidechain.dart b/test/mocks/rpc_mock_sidechain.dart
@@ -33,6 +33,7 @@ class MockSidechainRPC extends SidechainRPC {
       nfees: 0,
       txid: '',
       error: '',
+      raw: '',
     );
   }