feat: add qr scanner

ios/Runner/Info.plist

@@ -24,6 +24,8 @@
 	<string>$(FLUTTER_BUILD_NUMBER)</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSCameraUsageDescription</key>
+	<string>This app needs camera access to scan QR codes</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>

lib/features/account/account_did_page.dart

@@ -1,7 +1,12 @@
+import 'dart:math';
+
+import 'package:didpay/l10n/app_localizations.dart';
 import 'package:flutter/material.dart';
 import 'package:didpay/features/account/account_providers.dart';
 import 'package:didpay/shared/theme/grid.dart';
+import 'package:flutter/services.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:qr_flutter/qr_flutter.dart';
 
 class AccountDidPage extends HookConsumerWidget {
   const AccountDidPage({super.key});
@@ -10,11 +15,48 @@ class AccountDidPage extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final did = ref.watch(didProvider);
 
+    const maxSize = 250.0;
+    final screenSize = MediaQuery.of(context).size;
+    final qrSize = min(screenSize.width * 0.5, maxSize);
+
     return Scaffold(
-      appBar: AppBar(title: const Text('My DID')),
-      body: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: Grid.side),
-          child: Center(child: SelectableText(did.uri))),
+      appBar: AppBar(title: Text(Loc.of(context).myDid)),
+      body: Column(
+        children: [
+          const SizedBox(height: Grid.md),
+          QrImageView(
+            data: did.uri,
+            size: qrSize,
+            eyeStyle: QrEyeStyle(
+              eyeShape: QrEyeShape.square,
+              color: Theme.of(context).colorScheme.onBackground,
+            ),
+            dataModuleStyle: QrDataModuleStyle(
+              color: Theme.of(context).colorScheme.onBackground,
+              dataModuleShape: QrDataModuleShape.square,
+            ),
+          ),
+          const SizedBox(height: Grid.xxl),
+          ListTile(
+            title: Text(did.uri),
+            trailing: const Icon(Icons.content_copy),
+            onTap: () {
+              Clipboard.setData(ClipboardData(text: did.uri));
+              final snackBar = SnackBar(
+                content: Text(
+                  Loc.of(context).copiedDid,
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        color: Theme.of(context).colorScheme.onPrimaryContainer,
+                      ),
+                ),
+                backgroundColor: Theme.of(context).colorScheme.primaryContainer,
+              );
+
+              ScaffoldMessenger.of(context).showSnackBar(snackBar);
+            },
+          ),
+        ],
+      ),
     );
   }
 }

lib/features/payments/payment_details_page.dart

@@ -150,7 +150,6 @@ class PaymentDetailsPage extends HookConsumerWidget {
             : Loc.of(context).serviceFeeAmount(fee, 'USD'),
         style: Theme.of(context).textTheme.bodySmall,
       ),
-      contentPadding: const EdgeInsets.symmetric(horizontal: Grid.side),
       trailing: const Icon(Icons.chevron_right),
       onTap: () {
         Navigator.of(context).push(

lib/features/payments/search_payment_methods_page.dart

@@ -23,12 +23,12 @@ class SearchPaymentMethodsPage extends HookWidget {
     return Scaffold(
       appBar: AppBar(scrolledUnderElevation: 0),
       body: SafeArea(
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: Grid.side),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              Form(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: Grid.side),
+              child: Form(
                 key: _formKey,
                 child: Column(
                   mainAxisSize: MainAxisSize.min,
@@ -49,17 +49,17 @@ class SearchPaymentMethodsPage extends HookWidget {
                   ],
                 ),
               ),
-              const SizedBox(height: Grid.xs),
-              Expanded(
-                child: _buildList(
-                  context,
-                  selectedPaymentMethod,
-                  searchText,
-                  paymentMethods,
-                ),
+            ),
+            const SizedBox(height: Grid.xs),
+            Expanded(
+              child: _buildList(
+                context,
+                selectedPaymentMethod,
+                searchText,
+                paymentMethods,
               ),
-            ],
-          ),
+            ),
+          ],
         ),
       ),
     );

lib/features/pfis/pfi_verification_page.dart

@@ -14,7 +14,7 @@ class PfiVerificationPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final controller = WebViewController()
+    final controller = useMemoized(() => WebViewController())
       ..setBackgroundColor(Theme.of(context).colorScheme.background)
       ..setNavigationDelegate(
         NavigationDelegate(

lib/features/send/scan_qr_page.dart

@@ -0,0 +1,117 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:mobile_scanner/mobile_scanner.dart';
+import 'package:didpay/shared/theme/grid.dart';
+
+class ScanQrPage extends HookWidget {
+  const ScanQrPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final isProcessing = useState(false);
+    final controller = useMemoized(() => MobileScannerController());
+
+    useOnAppLifecycleStateChange((_, current) =>
+        current == AppLifecycleState.resumed
+            ? controller.start()
+            : controller.stop());
+
+    const maxSize = 400.0;
+    final screenSize = MediaQuery.of(context).size;
+    final scanSize = screenSize.width * 0.8;
+
+    final scanWindow = Rect.fromCenter(
+      center: screenSize.center(Offset.zero),
+      width: min(scanSize, maxSize),
+      height: min(scanSize, maxSize),
+    );
+
+    return Scaffold(
+      extendBodyBehindAppBar: true,
+      appBar: AppBar(
+        backgroundColor: Colors.transparent,
+        elevation: 0,
+        actions: [
+          IconButton(
+            icon: const Icon(Icons.flash_on),
+            onPressed: () => controller.toggleTorch(),
+          ),
+        ],
+      ),
+      body: SafeArea(
+        top: false,
+        bottom: false,
+        child: Stack(
+          children: [
+            MobileScanner(
+              controller: controller,
+              scanWindow: scanWindow,
+              onDetect: (barcode) {
+                if (isProcessing.value) return;
+                isProcessing.value = true;
+
+                Navigator.of(context).pop(
+                  barcode.barcodes.map((e) => e.rawValue).join(),
+                );
+              },
+            ),
+            CustomPaint(painter: _ScannerOverlay(scanWindow)),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _ScannerOverlay extends CustomPainter {
+  final Rect scanWindow;
+
+  _ScannerOverlay(this.scanWindow);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final backgroundPath = Path()..addRect(Rect.largest);
+    final cutoutPath = Path()
+      ..addRRect(
+        RRect.fromRectAndCorners(
+          scanWindow,
+          topLeft: const Radius.circular(Grid.radius),
+          topRight: const Radius.circular(Grid.radius),
+          bottomLeft: const Radius.circular(Grid.radius),
+          bottomRight: const Radius.circular(Grid.radius),
+        ),
+      );
+
+    final backgroundPaint = Paint()
+      ..color = Colors.black.withOpacity(0.5)
+      ..style = PaintingStyle.fill
+      ..blendMode = BlendMode.dstOut;
+
+    final backgroundWithCutout = Path.combine(
+      PathOperation.difference,
+      backgroundPath,
+      cutoutPath,
+    );
+
+    final borderRect = RRect.fromRectAndCorners(
+      scanWindow,
+      topLeft: const Radius.circular(Grid.radius),
+      topRight: const Radius.circular(Grid.radius),
+      bottomLeft: const Radius.circular(Grid.radius),
+      bottomRight: const Radius.circular(Grid.radius),
+    );
+
+    final borderPaint = Paint()
+      ..color = Colors.white
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = Grid.quarter;
+
+    canvas.drawPath(backgroundWithCutout, backgroundPaint);
+    canvas.drawRRect(borderRect, borderPaint);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}