Merge pull request #55 from WalletConnect/v3.0.0-beta17

v3.0.0-beta17

CHANGELOG.md

@@ -1,7 +1,11 @@
+## 3.0.0-beta17
+
+- UI fixes
+
 ## 3.0.0-beta16
 
 - UI fixes
-  
+
 ## 3.0.0-beta15
 
 - Fix a bug where Safe wallet was confused with SafePal wallet

example/pubspec.lock

@@ -724,10 +724,10 @@ packages:
     dependency: transitive
     description:
       name: qr_flutter_wc
-      sha256: "1939a737eded2bdbcc96fefede3edbfbe252d06ad3bba0195237096a068e4db2"
+      sha256: a926bf6bcf7d350eea48480e205ccffffca5cc84b5d77fb2b256318693e40d07
       url: "https://pub.dev"
     source: hosted
-    version: "0.0.1"
+    version: "0.0.3"
   rxdart:
     dependency: transitive
     description:
@@ -1107,7 +1107,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "3.0.0-beta16"
+    version: "3.0.0-beta17"
   web_socket_channel:
     dependency: transitive
     description:

lib/constants/string_constants.dart

@@ -1,7 +1,7 @@
 class StringConstants {
   // Request Headers
   static const X_SDK_TYPE = 'w3m';
-  static const X_SDK_VERSION = '3.0.0-beta16';
+  static const X_SDK_VERSION = '3.0.0-beta17';
   static const X_CORE_SDK_VERSION = 'flutter_v2.1.8';
 
   // UI

lib/pages/about_networks.dart

@@ -3,6 +3,7 @@ import 'package:url_launcher/url_launcher_string.dart';
 
 import 'package:web3modal_flutter/constants/key_constants.dart';
 import 'package:web3modal_flutter/constants/string_constants.dart';
+import 'package:web3modal_flutter/web3modal_flutter.dart';
 import 'package:web3modal_flutter/widgets/buttons/simple_icon_button.dart';
 import 'package:web3modal_flutter/widgets/help/help_section.dart';
 import 'package:web3modal_flutter/widgets/navigation/navbar.dart';
@@ -51,6 +52,9 @@ class AboutNetworks extends StatelessWidget {
               ),
               rightIcon: 'assets/icons/arrow_top_right.svg',
               title: 'Learn more',
+              size: BaseButtonSize.small,
+              iconSize: 12.0,
+              fontSize: 14.0,
             ),
             const SizedBox(height: 8.0),
           ],

lib/pages/connect_wallet_page.dart

@@ -170,13 +170,22 @@ class _ConnectWalletPageState extends State<ConnectWalletPage>
                             color: themeColors.error100,
                           ),
                         )
-                      : Text(
-                          'Continue in $walletName',
-                          textAlign: TextAlign.center,
-                          style: themeData.textStyles.paragraph500.copyWith(
-                            color: themeColors.foreground100,
-                          ),
-                        ),
+                      : !walletInstalled &&
+                              _selectedSegment == SegmentOption.mobile
+                          ? Text(
+                              'App not installed',
+                              textAlign: TextAlign.center,
+                              style: themeData.textStyles.paragraph500.copyWith(
+                                color: themeColors.foreground100,
+                              ),
+                            )
+                          : Text(
+                              'Continue in $walletName',
+                              textAlign: TextAlign.center,
+                              style: themeData.textStyles.paragraph500.copyWith(
+                                color: themeColors.foreground100,
+                              ),
+                            ),
                   const SizedBox.square(dimension: 8.0),
                   errorConnection
                       ? Text(
@@ -186,16 +195,19 @@ class _ConnectWalletPageState extends State<ConnectWalletPage>
                             color: themeColors.foreground200,
                           ),
                         )
-                      : Text(
-                          webOnlyWallet ||
-                                  _selectedSegment == SegmentOption.browser
-                              ? 'Open and continue in a new browser tab'
-                              : 'Accept connection request in the wallet',
-                          textAlign: TextAlign.center,
-                          style: themeData.textStyles.small500.copyWith(
-                            color: themeColors.foreground200,
-                          ),
-                        ),
+                      : !walletInstalled &&
+                              _selectedSegment == SegmentOption.mobile
+                          ? SizedBox.shrink()
+                          : Text(
+                              webOnlyWallet ||
+                                      _selectedSegment == SegmentOption.browser
+                                  ? 'Open and continue in a new browser tab'
+                                  : 'Accept connection request in the wallet',
+                              textAlign: TextAlign.center,
+                              style: themeData.textStyles.small500.copyWith(
+                                color: themeColors.foreground200,
+                              ),
+                            ),
                   const SizedBox.square(dimension: kPadding16),
                   Visibility(
                     visible: isPortrait &&
@@ -217,7 +229,7 @@ class _ConnectWalletPageState extends State<ConnectWalletPage>
                       onTap: () => service.connectSelectedWallet(
                         inBrowser: _selectedSegment == SegmentOption.browser,
                       ),
-                      leftIcon: 'assets/icons/arrow_top_right.svg',
+                      rightIcon: 'assets/icons/arrow_top_right.svg',
                       title: 'Open',
                       backgroundColor: Colors.transparent,
                       foregroundColor: themeColors.accent100,
@@ -262,8 +274,10 @@ class _ConnectWalletPageState extends State<ConnectWalletPage>
                   if (!isPortrait) const SizedBox.square(dimension: kPadding8),
                   SimpleIconButton(
                     onTap: () => _copyToClipboard(context),
-                    leftIcon: 'assets/icons/copy.svg',
+                    leftIcon: 'assets/icons/copy_14.svg',
+                    iconSize: 13.0,
                     title: 'Copy link',
+                    fontSize: 14.0,
                     backgroundColor: Colors.transparent,
                     foregroundColor: themeColors.foreground200,
                     overlayColor: MaterialStateProperty.all<Color>(

lib/pages/qr_code_page.dart

@@ -1,7 +1,9 @@
+import 'package:event/event.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
 import 'package:web3modal_flutter/constants/key_constants.dart';
+import 'package:web3modal_flutter/services/w3m_service/i_w3m_service.dart';
 import 'package:web3modal_flutter/theme/constants.dart';
 import 'package:web3modal_flutter/theme/w3m_theme.dart';
 import 'package:web3modal_flutter/widgets/buttons/simple_icon_button.dart';
@@ -12,9 +14,46 @@ import 'package:web3modal_flutter/widgets/navigation/navbar.dart';
 import 'package:web3modal_flutter/utils/toast/toast_message.dart';
 import 'package:web3modal_flutter/utils/toast/toast_utils_singleton.dart';
 
-class QRCodePage extends StatelessWidget {
+class QRCodePage extends StatefulWidget {
   const QRCodePage() : super(key: Web3ModalKeyConstants.qrCodePageKey);
 
+  @override
+  State<QRCodePage> createState() => _QRCodePageState();
+}
+
+class _QRCodePageState extends State<QRCodePage> {
+  IW3MService? _service;
+  Widget? _qrQodeWidget;
+  //
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) async {
+      _service = Web3ModalProvider.of(context).service;
+      _service!.addListener(_rebuildListener);
+      _service!.onPairingExpire.subscribe(_onPairingExpire);
+      await _service!.buildConnectionUri();
+      _qrQodeWidget = QRCodeWidget(
+        uri: _service!.wcUri!,
+        logoPath: 'assets/png/logo_wc.png',
+      );
+    });
+  }
+
+  void _rebuildListener() => setState(() {});
+  void _onPairingExpire(EventArgs? args) async {
+    await _service!.buildConnectionUri();
+  }
+
+  @override
+  void dispose() async {
+    _service!.onPairingExpire.unsubscribe(_onPairingExpire);
+    _service!.removeListener(_rebuildListener);
+    _service!.expirePreviousInactivePairings();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final themeData = Web3ModalTheme.getDataOf(context);
@@ -28,9 +67,9 @@ class QRCodePage extends StatelessWidget {
         child: Flex(
           direction: isPortrait ? Axis.vertical : Axis.horizontal,
           children: [
-            const Padding(
-              padding: EdgeInsets.all(16.0),
-              child: QRCodeWidget(logoPath: 'assets/png/logo_wc.png'),
+            Padding(
+              padding: EdgeInsets.all(kPadding16),
+              child: _qrQodeWidget ?? SizedBox.shrink(),
             ),
             Container(
               constraints: BoxConstraints(
@@ -55,8 +94,10 @@ class QRCodePage extends StatelessWidget {
                     padding: const EdgeInsets.symmetric(vertical: kPadding12),
                     child: SimpleIconButton(
                       onTap: () => _copyToClipboard(context),
-                      leftIcon: 'assets/icons/copy.svg',
+                      leftIcon: 'assets/icons/copy_14.svg',
+                      iconSize: 13.0,
                       title: 'Copy link',
+                      fontSize: 14.0,
                       backgroundColor: Colors.transparent,
                       foregroundColor: themeColors.foreground200,
                       overlayColor: MaterialStateProperty.all<Color>(

lib/services/w3m_service/w3m_service.dart

@@ -477,9 +477,11 @@ class W3MService with ChangeNotifier implements IW3MService {
         '[$runtimeType] error launching wallet. '
         '${selectedWalletRedirect?.toString()}',
       );
-      toastUtils.instance.show(
-        ToastMessage(type: ToastType.error, text: e.message),
-      );
+      if (e.message.toLowerCase() != 'app not installed') {
+        toastUtils.instance.show(
+          ToastMessage(type: ToastType.error, text: e.message),
+        );
+      }
     } catch (e, s) {
       W3MLoggerUtil.logger.e('[$runtimeType] error launching wallet. $e, $s');
     }

lib/utils/toast/toast_message.dart

@@ -27,7 +27,7 @@ class ToastMessage {
           assetColor: themeColors.success100,
           circleColor: themeColors.success100.withOpacity(0.15),
           borderColor: Colors.transparent,
-          padding: 4.0,
+          padding: 6.0,
           size: 24.0,
         );
       case ToastType.error:
@@ -36,7 +36,7 @@ class ToastMessage {
           assetColor: themeColors.error100,
           circleColor: themeColors.error100.withOpacity(0.15),
           borderColor: Colors.transparent,
-          padding: 4.0,
+          padding: 6.0,
           size: 24.0,
         );
       default:
@@ -45,7 +45,7 @@ class ToastMessage {
           assetColor: themeColors.accent100,
           circleColor: themeColors.accent100.withOpacity(0.15),
           borderColor: Colors.transparent,
-          padding: 4.0,
+          padding: 6.0,
           size: 24.0,
         );
     }

lib/utils/util.dart

@@ -8,12 +8,12 @@ class Util {
     return short && value.length > 8 ? '${value.substring(0, 8)}..' : value;
   }
 
-  static String truncate(String value, {int length = 8}) {
+  static String truncate(String value, {int length = 4}) {
     if (value.length <= length) {
       return value;
     }
 
-    return '${value.substring(0, 4)}...${value.substring(value.length - 4)}';
+    return '${value.substring(0, length)}...${value.substring(value.length - length)}';
   }
 
   static List<Color> get defaultAvatarColors => [

lib/widgets/buttons/address_button.dart

@@ -76,12 +76,24 @@ class _AddressButtonState extends State<AddressButton> {
           },
         ),
       ),
-      icon: W3MAccountAvatar(
-        service: widget.service,
-        size: widget.size.height - 12.0,
-        disabled: widget.onTap == null,
+      overridePadding: MaterialStateProperty.all<EdgeInsetsGeometry>(
+        EdgeInsets.only(
+          left: 6.0,
+          right: widget.size == BaseButtonSize.small ? 12.0 : 16.0,
+        ),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          W3MAccountAvatar(
+            service: widget.service,
+            size: widget.size.height * 0.7,
+            disabled: widget.onTap == null,
+          ),
+          const SizedBox.square(dimension: 4.0),
+          Text(Util.truncate(_address ?? '')),
+        ],
       ),
-      child: Text(Util.truncate(_address ?? '')),
     );
   }
 }

lib/widgets/buttons/balance_button.dart

@@ -88,11 +88,23 @@ class _BalanceButtonState extends State<BalanceButton> {
           },
         ),
       ),
-      icon: RoundedIcon(
-        imageUrl: _tokenImage,
-        size: widget.size.height - 12.0,
+      overridePadding: MaterialStateProperty.all<EdgeInsetsGeometry>(
+        EdgeInsets.only(
+          left: 6.0,
+          right: widget.size == BaseButtonSize.small ? 12.0 : 16.0,
+        ),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          RoundedIcon(
+            imageUrl: _tokenImage,
+            size: widget.size.height * 0.7,
+          ),
+          const SizedBox.square(dimension: 4.0),
+          Text('$_balance ${_tokenName ?? ''}'),
+        ],
       ),
-      child: Text('$_balance ${_tokenName ?? ''}'),
     );
   }
 }