feat: add on-screen number pad (#9)

* feat: add on-screen number pad

* fix uri typo

* change `didUri` to work with `issuer` module

* use `GestureDetector` and `AnimatedDefaultTextStyle` to animate font size

* add `onDeletePressed` callback

* add `SendPage`

frontend/lib/features/home/home_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_starter/features/send/send_page.dart';
 import 'package:flutter_starter/l10n/app_localizations.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
@@ -24,7 +25,13 @@ class HomePage extends HookConsumerWidget {
             children: [
               FilledButton(
                   onPressed: () {}, child: Text(Loc.of(context).deposit)),
-              FilledButton(onPressed: () {}, child: Text(Loc.of(context).send)),
+              FilledButton(
+                  onPressed: () {
+                    Navigator.of(context).push(MaterialPageRoute(
+                      builder: (context) => const SendPage(),
+                    ));
+                  },
+                  child: Text(Loc.of(context).send)),
               FilledButton(
                   onPressed: () {}, child: Text(Loc.of(context).withdraw)),
             ],

frontend/lib/features/pfis/pfi_confirmation_page.dart

@@ -105,7 +105,7 @@ class PfiConfirmationPage extends HookConsumerWidget {
     }
 
     var uri = Uri.parse(
-        '${pfiService.serviceEndpoint}/credential?transaction_id=$transactionId');
+        '${pfiService.serviceEndpoint}/credential?transactionId=$transactionId');
     final response = await http.get(uri);
     if (response.statusCode != 200) {
       // Add real error handling here...

frontend/lib/features/pfis/pfi_providers.dart

@@ -6,7 +6,7 @@ final pfisProvider = Provider<List<Pfi>>(
     Pfi(
       id: 'prototype',
       name: 'Prototype',
-      didUri: 'did:dht:3x1hbjobt577amnoeoxcenqrbjicym5mgsx6c6zszisf1igfj51y',
+      didUri: 'did:dht:74hg1efatndi8enx3e4z6c4u8ieh1xfkyay4ntg4dg1w6risu35y',
     ),
     Pfi(
       id: 'africa',

frontend/lib/features/send/send_page.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_starter/l10n/app_localizations.dart';
+import 'package:flutter_starter/shared/number_pad.dart';
+
+class SendPage extends HookWidget {
+  const SendPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final sendAmount = useState<String>('\$0');
+
+    return Scaffold(
+        appBar: AppBar(),
+        body: SafeArea(
+          child:
+              Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
+            Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(
+                    sendAmount.value,
+                    style: Theme.of(context).textTheme.displayLarge,
+                    textAlign: TextAlign.center,
+                  ),
+                  const SizedBox(height: 40),
+                ],
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.symmetric(vertical: 16.0),
+              child: NumberPad(
+                onKeyPressed: (key) {
+                  sendAmount.value = (sendAmount.value == '\$0')
+                      ? '\$$key'
+                      : '${sendAmount.value}$key';
+                },
+                onDeletePressed: () {
+                  sendAmount.value = (sendAmount.value.length > 2)
+                      ? sendAmount.value
+                          .substring(0, sendAmount.value.length - 1)
+                      : '\$0';
+                },
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 20.0),
+              child: FilledButton(
+                onPressed: () {},
+                child: Text(Loc.of(context).send),
+              ),
+            ),
+          ]),
+        ));
+  }
+}

frontend/lib/shared/number_pad.dart

@@ -0,0 +1,99 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+class NumberPad extends HookWidget {
+  final Function(String) onKeyPressed;
+  final VoidCallback onDeletePressed;
+
+  const NumberPad({
+    required this.onKeyPressed,
+    required this.onDeletePressed,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final pressedKey = useState<String>('');
+
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 16.0),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _buildRow(context, ['1', '2', '3'], pressedKey),
+          _buildRow(context, ['4', '5', '6'], pressedKey),
+          _buildRow(context, ['7', '8', '9'], pressedKey),
+          _buildRow(context, ['.', '0', '<'], pressedKey),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildRow(
+    BuildContext context,
+    List<String> keys,
+    ValueNotifier<String> pressedKey,
+  ) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: keys.map((key) {
+        return NumberPadKey(
+          title: key,
+          onKeyPressed: onKeyPressed,
+          onDeletePressed: onDeletePressed,
+        );
+      }).toList(),
+    );
+  }
+}
+
+class NumberPadKey extends HookWidget {
+  final String title;
+  final Function(String) onKeyPressed;
+  final VoidCallback onDeletePressed;
+
+  const NumberPadKey({
+    required this.title,
+    required this.onKeyPressed,
+    required this.onDeletePressed,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    const defaultSize = 24.0;
+    const selectedSize = 40.0;
+
+    final keySize = useState(defaultSize);
+
+    return Container(
+      margin: const EdgeInsets.all(8.0),
+      width: 100.0,
+      height: 50.0,
+      child: GestureDetector(
+        onTapDown: (_) => keySize.value = selectedSize,
+        onTapCancel: () => keySize.value = defaultSize,
+        onTapUp: (key) {
+          keySize.value = defaultSize;
+          (title == '<') ? onDeletePressed() : onKeyPressed(title);
+        },
+        child: AnimatedDefaultTextStyle(
+          duration: const Duration(milliseconds: 100),
+          style: TextStyle(
+            fontSize: keySize.value,
+            fontWeight: FontWeight.w600,
+            color: Theme.of(context).colorScheme.onBackground,
+          ),
+          child: Center(
+            child: Text(
+              title,
+              textScaler: TextScaler.noScaling,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}