Merge pull request #281 from WalletConnect/feature/web_support

Web Support
WalletConnect · Apr 18, 2024 · df0db07 · df0db07
2 parents d4061da + bddf6df
commit df0db07
Show file tree

Hide file tree

Showing 29 changed files with 425 additions and 192 deletions.
diff --git a/.metadata b/.metadata
@@ -0,0 +1,30 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "db7ef5bf9f59442b0e200a90587e8fa5e0c6336a"
+  channel: "stable"
+
+project_type: plugin
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: db7ef5bf9f59442b0e200a90587e8fa5e0c6336a
+      base_revision: db7ef5bf9f59442b0e200a90587e8fa5e0c6336a
+    - platform: web
+      create_revision: db7ef5bf9f59442b0e200a90587e8fa5e0c6336a
+      base_revision: db7ef5bf9f59442b0e200a90587e8fa5e0c6336a
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 2.2.3-beta01
+
+- Web Support is here!
+
 ## 2.2.2
 
 - Fix on requestReadContract. Fixes issues https://github.com/WalletConnect/WalletConnectFlutterV2/issues/278 and https://github.com/WalletConnect/Web3ModalFlutter/issues/99

diff --git a/example/dapp/.metadata b/example/dapp/.metadata
@@ -1,38 +1,23 @@
 # This file tracks properties of this Flutter project.
 # Used by Flutter tool to assess capabilities and perform upgrades etc.
 #
-# This file should be version controlled.
+# This file should be version controlled and should not be manually edited.
 
 version:
-  revision: 135454af32477f815a7525073027a3ff9eff1bfd
-  channel: stable
+  revision: "db7ef5bf9f59442b0e200a90587e8fa5e0c6336a"
+  channel: "stable"
 
 project_type: app
 
 # Tracks metadata for the flutter migrate command
 migration:
   platforms:
     - platform: root
-      create_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-      base_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-    - platform: android
-      create_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-      base_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-    - platform: ios
-      create_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-      base_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-    - platform: linux
-      create_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-      base_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-    - platform: macos
-      create_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-      base_revision: 135454af32477f815a7525073027a3ff9eff1bfd
+      create_revision: db7ef5bf9f59442b0e200a90587e8fa5e0c6336a
+      base_revision: db7ef5bf9f59442b0e200a90587e8fa5e0c6336a
     - platform: web
-      create_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-      base_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-    - platform: windows
-      create_revision: 135454af32477f815a7525073027a3ff9eff1bfd
-      base_revision: 135454af32477f815a7525073027a3ff9eff1bfd
+      create_revision: db7ef5bf9f59442b0e200a90587e8fa5e0c6336a
+      base_revision: db7ef5bf9f59442b0e200a90587e8fa5e0c6336a
 
   # User provided section
 

diff --git a/example/dapp/ios/Podfile.lock b/example/dapp/ios/Podfile.lock
@@ -28,7 +28,7 @@ SPEC CHECKSUMS:
   Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7
   package_info_plus: 58f0028419748fad15bf008b270aaa8e54380b1c
   shared_preferences_foundation: 5b919d13b803cadd15ed2dc053125c68730e5126
-  url_launcher_ios: bf5ce03e0e2088bad9cc378ea97fa0ed5b49673b
+  url_launcher_ios: 6116280ddcfe98ab8820085d8d76ae7449447586
 
 PODFILE CHECKSUM: c4c93c5f6502fe2754f48404d3594bf779584011
 

diff --git a/example/dapp/lib/main.dart b/example/dapp/lib/main.dart
@@ -52,8 +52,8 @@ class _MyHomePageState extends State<MyHomePage> {
 
   @override
   void initState() {
-    initialize();
     super.initState();
+    initialize();
   }
 
   Future<void> initialize() async {
@@ -108,12 +108,12 @@ class _MyHomePageState extends State<MyHomePage> {
         PageData(
           page: PairingsPage(web3App: _web3App!),
           title: StringConstants.pairingsPageTitle,
-          icon: Icons.connect_without_contact_sharp,
+          icon: Icons.vertical_align_center_rounded,
         ),
         PageData(
           page: SessionsPage(web3App: _web3App!),
           title: StringConstants.sessionsPageTitle,
-          icon: Icons.confirmation_number_outlined,
+          icon: Icons.workspaces_filled,
         ),
         PageData(
           page: AuthPage(web3App: _web3App!),
@@ -189,6 +189,8 @@ class _MyHomePageState extends State<MyHomePage> {
       currentIndex: _selectedIndex,
       unselectedItemColor: Colors.grey,
       selectedItemColor: Colors.indigoAccent,
+      showUnselectedLabels: true,
+      type: BottomNavigationBarType.fixed,
       // called when one tab is selected
       onTap: (int index) {
         setState(() {

diff --git a/example/dapp/lib/pages/auth_page.dart b/example/dapp/lib/pages/auth_page.dart
@@ -47,10 +47,6 @@ class AuthPageState extends State<AuthPage> {
 
     return Center(
       child: Container(
-        // color: StyleConstants.primaryColor,
-        padding: const EdgeInsets.all(
-          StyleConstants.linear8,
-        ),
         constraints: const BoxConstraints(
           maxWidth: StyleConstants.maxWidth,
         ),

diff --git a/example/dapp/lib/pages/connect_page.dart b/example/dapp/lib/pages/connect_page.dart
@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:fl_toast/fl_toast.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:qr_flutter/qr_flutter.dart';
@@ -30,6 +31,13 @@ class ConnectPageState extends State<ConnectPage> {
   final List<ChainMetadata> _selectedChains = [];
   bool _shouldDismissQrCode = true;
 
+  void setTestnet(bool value) {
+    if (value != _testnetOnly) {
+      _selectedChains.clear();
+    }
+    _testnetOnly = value;
+  }
+
   @override
   Widget build(BuildContext context) {
     // Build the list of chain buttons, clear if the textnet changed
@@ -66,6 +74,8 @@ class ConnectPageState extends State<ConnectPage> {
             ? null
             : () => _onConnect(showToast: (m) async {
                   await showPlatformToast(child: Text(m), context: context);
+                }, closeModal: () {
+                  Navigator.of(context).pop();
                 }),
         style: ButtonStyle(
           backgroundColor: MaterialStateProperty.resolveWith<Color>(
@@ -153,11 +163,21 @@ class ConnectPageState extends State<ConnectPage> {
     );
   }
 
-  Future<void> _onConnect({Function(String message)? showToast}) async {
+  Future<void> _onConnect({
+    Function(String message)? showToast,
+    VoidCallback? closeModal,
+  }) async {
     debugPrint('Creating connection and session');
     // It is currently safer to send chains approvals on optionalNamespaces
     // but depending on Wallet implementation you may need to send some (for innstance eip155:1) as required
     final ConnectResponse res = await widget.web3App.connect(
+      // requiredNamespaces: {
+      //   'eip155': const RequiredNamespace(
+      //     chains: [],
+      //     methods: MethodsConstants.requiredMethods,
+      //     events: EventsConstants.requiredEvents,
+      //   ),
+      // },
       optionalNamespaces: {
         'eip155': RequiredNamespace(
           chains: _selectedChains.map((c) => c.chainId).toList(),
@@ -225,6 +245,7 @@ class ConnectPageState extends State<ConnectPage> {
         showToast?.call(StringConstants.authFailed);
       } else {
         showToast?.call(StringConstants.authSucceeded);
+        closeModal?.call();
       }
 
       // ignore: use_build_context_synchronously
@@ -239,61 +260,106 @@ class ConnectPageState extends State<ConnectPage> {
         Navigator.pop(context);
       }
       showToast?.call(StringConstants.connectionFailed);
+      closeModal?.call();
     }
   }
 
   Future<void> _showQrCode(ConnectResponse response) async {
     // Show the QR code
     debugPrint('Showing QR Code: ${response.uri}');
-
     _shouldDismissQrCode = true;
-    await showDialog(
-      context: context,
-      builder: (context) {
-        return AlertDialog(
-          title: const Text(
-            StringConstants.scanQrCode,
-            style: StyleConstants.titleText,
-            textAlign: TextAlign.center,
-          ),
-          content: SizedBox(
-            width: 300,
-            height: 350,
-            child: Center(
-              child: Column(
-                children: [
-                  QrImageView(
-                    data: response.uri!.toString(),
-                  ),
-                  const SizedBox(
-                    height: StyleConstants.linear16,
-                  ),
-                  ElevatedButton(
-                    onPressed: () {
-                      Clipboard.setData(
-                        ClipboardData(
-                          text: response.uri!.toString(),
-                        ),
-                      ).then(
-                        (_) => showPlatformToast(
-                          child: const Text(
-                            StringConstants.copiedToClipboard,
-                          ),
-                          context: context,
-                        ),
-                      );
-                    },
-                    child: const Text(
-                      'Copy URL to Clipboard',
-                    ),
+    if (kIsWeb) {
+      await showDialog(
+        context: context,
+        barrierDismissible: false,
+        builder: (BuildContext context) {
+          return AlertDialog(
+            insetPadding: const EdgeInsets.all(0.0),
+            contentPadding: const EdgeInsets.all(0.0),
+            backgroundColor: Colors.white,
+            content: SizedBox(
+              width: 400.0,
+              child: AspectRatio(
+                aspectRatio: 0.8,
+                child: Padding(
+                  padding: const EdgeInsets.all(20.0),
+                  child: _QRCodeView(
+                    uri: response.uri.toString(),
                   ),
-                ],
+                ),
               ),
             ),
-          ),
-        );
-      },
+            actions: [
+              TextButton(
+                onPressed: () => Navigator.pop(context),
+                child: const Text('Cancel'),
+              )
+            ],
+          );
+        },
+      );
+      _shouldDismissQrCode = false;
+      return;
+    }
+    Navigator.push(
+      context,
+      MaterialPageRoute(
+        fullscreenDialog: true,
+        builder: (context) => QRCodeScreen(response: response),
+      ),
+    );
+  }
+}
+
+class QRCodeScreen extends StatefulWidget {
+  const QRCodeScreen({super.key, required this.response});
+  final ConnectResponse response;
+
+  @override
+  State<QRCodeScreen> createState() => _QRCodeScreenState();
+}
+
+class _QRCodeScreenState extends State<QRCodeScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      child: Scaffold(
+        appBar: AppBar(title: const Text(StringConstants.scanQrCode)),
+        body: _QRCodeView(
+          uri: widget.response.uri!.toString(),
+        ),
+      ),
+    );
+  }
+}
+
+class _QRCodeView extends StatelessWidget {
+  const _QRCodeView({required this.uri});
+  final String uri;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        QrImageView(data: uri),
+        const SizedBox(
+          height: StyleConstants.linear16,
+        ),
+        ElevatedButton(
+          onPressed: () {
+            Clipboard.setData(
+              ClipboardData(text: uri.toString()),
+            ).then(
+              (_) => showPlatformToast(
+                child: const Text(StringConstants.copiedToClipboard),
+                context: context,
+              ),
+            );
+          },
+          child: const Text('Copy URL to Clipboard'),
+        ),
+      ],
     );
-    _shouldDismissQrCode = false;
   }
 }
diff --git a/example/dapp/lib/pages/pairings_page.dart b/example/dapp/lib/pages/pairings_page.dart
@@ -90,14 +90,11 @@ class PairingsPageState extends State<PairingsPage> {
 
     return Center(
       child: Container(
-        // color: StyleConstants.primaryColor,
-        padding: const EdgeInsets.all(
-          StyleConstants.linear8,
-        ),
         constraints: const BoxConstraints(
           maxWidth: StyleConstants.maxWidth,
         ),
         child: ListView(
+          padding: const EdgeInsets.all(0.0),
           children: pairingItems,
         ),
       ),