Cw 451 wallet connect for ethereum (#1049)

* Update Flutter Update packages * Feat: Wallet connect for ethereum * Fix localization issues Fix UI issues Update old packages Update workflow Update how to build guide * feat: Wallet connect * feat: Add wallet connect for ethereum * chore: Add eth dependencies in configure file * Minor: `WalletConnect` settings name, not `Wallet connect` * fix: Merge conflicts * fix: Issues with test cases on various dApps, introduce Arbitrum rinkerby as suported chain * ui: Design fixes for WalletConnect flow * chore: Update repo and comment out send apk to channel in workflow * fix: Core implementation * feat: WalletConnect WIP * feat: WalletConnect WIP * feat: WalletConnect WIP * chore: Unused parameters WIP [skip ci] * fix: Code review fixes * Feat: WalletConnect feat WIP * feat: WalletConnect * feat: WalletConnect * feat: WalletConnect * Feat: WalletConnect * Feat: WalletConnect * feat: Remove queue support for the bottomsheet * feat: WalletConnect feature, bug fixes, folder restructuring, localization * Feat: Add positive feedback prompt on successful transaction * fix: Delete session bug * fix: dependencies registration WIP * feat: Registering dependencies for walletconnect * chore: Move key data to secrets * chore: ensure appropriate null checks * chore: localization * chore: Remove unused code * localization * chore: Remove unused code * chore: Remove unused code * chore: Add walletconnect project id key entry * fix: Revert bash command for linnux support * fix: Issues with translation in some languages and making unneeded external variable private * fix: Add bottomsheet listener to desktop dashboard page * Generalize ethereum not enough gas error check --------- Co-authored-by: OmarHatem <omarh.ismail1@gmail.com> Co-authored-by: Justin Ehrenhofer <justin.ehrenhofer@gmail.com>
2026-10-20 06:08:34 +02:00 · 2023-10-03 17:56:10 +03:00
parent ae71f2045b
commit 32643823e5
67 changed files with 2819 additions and 314 deletions
@@ -1,9 +1,12 @@
 import 'dart:async';
+import 'package:cake_wallet/core/wallet_connect/wc_bottom_sheet_service.dart';
+import 'package:cake_wallet/core/wallet_connect/web3wallet_service.dart';
 import 'package:cake_wallet/entities/preferences_key.dart';
 import 'package:cake_wallet/di.dart';
 import 'package:cake_wallet/entities/main_actions.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/market_place_page.dart';
+import 'package:cake_wallet/src/screens/wallet_connect/widgets/modals/bottom_sheet_listener.dart';
 import 'package:cake_wallet/src/widgets/gradient_background.dart';
 import 'package:cake_wallet/themes/extensions/sync_indicator_theme.dart';
 import 'package:cake_wallet/utils/device_info.dart';
@@ -35,12 +38,14 @@ import 'package:cake_wallet/themes/extensions/balance_page_theme.dart';

 class DashboardPage extends StatelessWidget {
  DashboardPage({
+    required this.bottomSheetService,
    required this.balancePage,
    required this.dashboardViewModel,
    required this.addressListViewModel,
  });

  final BalancePage balancePage;
+  final BottomSheetService bottomSheetService;
  final DashboardViewModel dashboardViewModel;
  final WalletAddressListViewModel addressListViewModel;

@@ -55,12 +60,14 @@ class DashboardPage extends StatelessWidget {
            } else {
              return _DashboardPageView(
                balancePage: balancePage,
+                bottomSheetService: bottomSheetService,
                dashboardViewModel: dashboardViewModel,
                addressListViewModel: addressListViewModel,
              );
            }
          } else if (ResponsiveLayoutUtil.instance.shouldRenderMobileUI()) {
            return _DashboardPageView(
+              bottomSheetService: bottomSheetService,
              balancePage: balancePage,
              dashboardViewModel: dashboardViewModel,
              addressListViewModel: addressListViewModel,
@@ -76,6 +83,7 @@ class DashboardPage extends StatelessWidget {

 class _DashboardPageView extends BasePage {
  _DashboardPageView({
+    required this.bottomSheetService,
    required this.balancePage,
    required this.dashboardViewModel,
    required this.addressListViewModel,
@@ -126,6 +134,7 @@ class _DashboardPageView extends BasePage {
  }

  final DashboardViewModel dashboardViewModel;
+  final BottomSheetService bottomSheetService;
  final WalletAddressListViewModel addressListViewModel;

  int get initialPage => dashboardViewModel.shouldShowMarketPlaceInDashboard ? 1 : 0;
@@ -158,102 +167,106 @@ class _DashboardPageView extends BasePage {

    return SafeArea(
      minimum: EdgeInsets.only(bottom: 24),
-      child: Column(
-        mainAxisSize: MainAxisSize.max,
-        children: <Widget>[
-          Expanded(
-            child: Observer(
-              builder: (context) {
-                return PageView.builder(
-                  controller: controller,
-                  itemCount: pages.length,
-                  itemBuilder: (context, index) => pages[index],
-                );
-              },
-            ),
-          ),
-          Padding(
-            padding: EdgeInsets.only(bottom: 24, top: 10),
-            child: Observer(
-              builder: (context) {
-                return ExcludeSemantics(
-                  child: SmoothPageIndicator(
+      child: BottomSheetListener(
+        bottomSheetService: bottomSheetService,
+        child: Column(
+          mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            Expanded(
+              child: Observer(
+                builder: (context) {
+                  return PageView.builder(
                    controller: controller,
-                    count: pages.length,
-                    effect: ColorTransitionEffect(
-                      spacing: 6.0,
-                      radius: 6.0,
-                      dotWidth: 6.0,
-                      dotHeight: 6.0,
-                      dotColor: Theme.of(context).indicatorColor,
-                      activeDotColor: Theme.of(context)
-                          .extension<DashboardPageTheme>()!
-                          .indicatorDotTheme
-                          .activeIndicatorColor,
-                    ),
-                  ),
-                );
-              },
+                    itemCount: pages.length,
+                    itemBuilder: (context, index) => pages[index],
+                  );
+                },
+              ),
            ),
-          ),
-          Observer(
-            builder: (_) {
-              return ClipRect(
-                child: Container(
-                  margin: const EdgeInsets.only(left: 16, right: 16),
-                  child: Container(
-                    decoration: BoxDecoration(
-                      borderRadius: BorderRadius.circular(50.0),
-                      border: Border.all(
-                        color: Theme.of(context).extension<BalancePageTheme>()!.cardBorderColor,
-                        width: 1,
+            Padding(
+              padding: EdgeInsets.only(bottom: 24, top: 10),
+              child: Observer(
+                builder: (context) {
+                  return ExcludeSemantics(
+                    child: SmoothPageIndicator(
+                      controller: controller,
+                      count: pages.length,
+                      effect: ColorTransitionEffect(
+                        spacing: 6.0,
+                        radius: 6.0,
+                        dotWidth: 6.0,
+                        dotHeight: 6.0,
+                        dotColor: Theme.of(context).indicatorColor,
+                        activeDotColor: Theme.of(context)
+                            .extension<DashboardPageTheme>()!
+                            .indicatorDotTheme
+                            .activeIndicatorColor,
                      ),
-                      color:
-                          Theme.of(context).extension<SyncIndicatorTheme>()!.syncedBackgroundColor,
                    ),
+                  );
+                },
+              ),
+            ),
+            Observer(
+              builder: (_) {
+                return ClipRect(
+                  child: Container(
+                    margin: const EdgeInsets.only(left: 16, right: 16),
                    child: Container(
-                      padding: EdgeInsets.only(left: 32, right: 32),
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                        children: MainActions.all
-                            .where((element) => element.canShow?.call(dashboardViewModel) ?? true)
-                            .map(
-                              (action) => Semantics(
-                                button: true,
-                                enabled: (action.isEnabled?.call(dashboardViewModel) ?? true),
-                                child: ActionButton(
-                                  image: Image.asset(
-                                    action.image,
-                                    height: 24,
-                                    width: 24,
-                                    color: action.isEnabled?.call(dashboardViewModel) ?? true
-                                        ? Theme.of(context)
-                                            .extension<DashboardPageTheme>()!
-                                            .mainActionsIconColor
+                      decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(50.0),
+                        border: Border.all(
+                          color: Theme.of(context).extension<BalancePageTheme>()!.cardBorderColor,
+                          width: 1,
+                        ),
+                        color: Theme.of(context)
+                            .extension<SyncIndicatorTheme>()!
+                            .syncedBackgroundColor,
+                      ),
+                      child: Container(
+                        padding: EdgeInsets.only(left: 32, right: 32),
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: MainActions.all
+                              .where((element) => element.canShow?.call(dashboardViewModel) ?? true)
+                              .map(
+                                (action) => Semantics(
+                                  button: true,
+                                  enabled: (action.isEnabled?.call(dashboardViewModel) ?? true),
+                                  child: ActionButton(
+                                    image: Image.asset(
+                                      action.image,
+                                      height: 24,
+                                      width: 24,
+                                      color: action.isEnabled?.call(dashboardViewModel) ?? true
+                                          ? Theme.of(context)
+                                              .extension<DashboardPageTheme>()!
+                                              .mainActionsIconColor
+                                          : Theme.of(context)
+                                              .extension<BalancePageTheme>()!
+                                              .labelTextColor,
+                                    ),
+                                    title: action.name(context),
+                                    onClick: () async =>
+                                        await action.onTap(context, dashboardViewModel),
+                                    textColor: action.isEnabled?.call(dashboardViewModel) ?? true
+                                        ? null
                                        : Theme.of(context)
                                            .extension<BalancePageTheme>()!
                                            .labelTextColor,
                                  ),
-                                  title: action.name(context),
-                                  onClick: () async =>
-                                      await action.onTap(context, dashboardViewModel),
-                                  textColor: action.isEnabled?.call(dashboardViewModel) ?? true
-                                      ? null
-                                      : Theme.of(context)
-                                          .extension<BalancePageTheme>()!
-                                          .labelTextColor,
                                ),
-                              ),
-                            )
-                            .toList(),
+                              )
+                              .toList(),
+                        ),
                      ),
                    ),
                  ),
-                ),
-              );
-            },
-          ),
-        ],
+                );
+              },
+            ),
+          ],
+        ),
      ),
    );
  }
@@ -1,8 +1,10 @@
 import 'dart:async';
+import 'package:cake_wallet/core/wallet_connect/wc_bottom_sheet_service.dart';
 import 'package:cake_wallet/entities/preferences_key.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/screens/release_notes/release_notes_screen.dart';
+import 'package:cake_wallet/src/screens/wallet_connect/widgets/modals/bottom_sheet_listener.dart';
 import 'package:cake_wallet/src/screens/yat_emoji_id.dart';
 import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
@@ -19,12 +21,14 @@ import 'package:shared_preferences/shared_preferences.dart';
 class DesktopDashboardPage extends StatelessWidget {
  DesktopDashboardPage({
    required this.balancePage,
+    required this.bottomSheetService,
    required this.dashboardViewModel,
    required this.addressListViewModel,
    required this.desktopKey,
  });

  final BalancePage balancePage;
+  final BottomSheetService bottomSheetService;
  final DashboardViewModel dashboardViewModel;
  final WalletAddressListViewModel addressListViewModel;
  final GlobalKey<NavigatorState> desktopKey;
@@ -36,31 +40,34 @@ class DesktopDashboardPage extends StatelessWidget {
  Widget build(BuildContext context) {
    _setEffects(context);

-    return Container(
-      color: Theme.of(context).colorScheme.background,
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Container(
-            width: 400,
-            child: balancePage,
-          ),
-          Flexible(
-            child: ConstrainedBox(
-              constraints: BoxConstraints(maxWidth: 500),
-              child: Navigator(
-                key: desktopKey,
-                initialRoute: Routes.desktop_actions,
-                onGenerateRoute: (settings) => Router.createRoute(settings),
-                onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) {
-                  return [
-                    navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!
-                  ];
-                },
+    return BottomSheetListener(
+      bottomSheetService: bottomSheetService,
+      child: Container(
+        color: Theme.of(context).colorScheme.background,
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Container(
+              width: 400,
+              child: balancePage,
+            ),
+            Flexible(
+              child: ConstrainedBox(
+                constraints: BoxConstraints(maxWidth: 500),
+                child: Navigator(
+                  key: desktopKey,
+                  initialRoute: Routes.desktop_actions,
+                  onGenerateRoute: (settings) => Router.createRoute(settings),
+                  onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) {
+                    return [
+                      navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!
+                    ];
+                  },
+                ),
              ),
            ),
-          ),
-        ],
+          ],
+        ),
      ),
    );
  }
@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'package:cake_wallet/core/auth_service.dart';
 import 'package:cake_wallet/core/totp_request_details.dart';
+import 'package:cake_wallet/core/wallet_connect/wc_bottom_sheet_service.dart';
 import 'package:cake_wallet/utils/device_info.dart';
 import 'package:cake_wallet/utils/payment_request.dart';
 import 'package:flutter/material.dart';
@@ -97,8 +98,7 @@ class RootState extends State<Root> with WidgetsBindingObserver {
          return;
        }

-        if (!_isInactive &&
-            widget.authenticationStore.state == AuthenticationState.allowed) {
+        if (!_isInactive && widget.authenticationStore.state == AuthenticationState.allowed) {
          setState(() => _setInactive(true));
        }

@@ -125,16 +125,15 @@ class RootState extends State<Root> with WidgetsBindingObserver {
              return;
            } else {
              final useTotp = widget.appStore.settingsStore.useTOTP2FA;
-              final shouldUseTotp2FAToAccessWallets = widget.appStore
-                  .settingsStore.shouldRequireTOTP2FAForAccessingWallet;
+              final shouldUseTotp2FAToAccessWallets =
+                  widget.appStore.settingsStore.shouldRequireTOTP2FAForAccessingWallet;
              if (useTotp && shouldUseTotp2FAToAccessWallets) {
                _reset();
                auth.close(
                  route: Routes.totpAuthCodePage,
                  arguments: TotpAuthArgumentsModel(
                    onTotpAuthenticationFinished:
-                        (bool isAuthenticatedSuccessfully,
-                            TotpAuthCodePageState totpAuth) {
+                        (bool isAuthenticatedSuccessfully, TotpAuthCodePageState totpAuth) {
                      if (!isAuthenticatedSuccessfully) {
                        return;
                      }
@@ -169,7 +168,10 @@ class RootState extends State<Root> with WidgetsBindingObserver {
      launchUri = null;
    }

-    return WillPopScope(onWillPop: () async => false, child: widget.child);
+    return WillPopScope(
+      onWillPop: () async => false,
+      child: widget.child,
+    );
  }

  void _reset() {
@@ -1,12 +1,15 @@
+import 'package:cake_wallet/core/wallet_connect/web3wallet_service.dart';
 import 'package:cake_wallet/src/screens/settings/widgets/settings_cell_with_arrow.dart';
 import 'package:cake_wallet/src/screens/settings/widgets/settings_picker_cell.dart';
 import 'package:cake_wallet/src/screens/settings/widgets/settings_switcher_cell.dart';
+import 'package:cake_wallet/src/screens/settings/widgets/wallet_connect_button.dart';
+import 'package:cake_wallet/src/screens/wallet_connect/wc_connections_listing_view.dart';
 import 'package:cake_wallet/utils/device_info.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
 import 'package:cake_wallet/view_model/settings/sync_mode.dart';
+import 'package:cw_core/wallet_type.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
@@ -15,11 +18,12 @@ import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';

 class ConnectionSyncPage extends BasePage {
-  ConnectionSyncPage(this.dashboardViewModel);
+  ConnectionSyncPage(this.dashboardViewModel, this.web3walletService);

  @override
  String get title => S.current.connection_sync;

+  final Web3WalletService web3walletService;
  final DashboardViewModel dashboardViewModel;

  @override
@@ -66,6 +70,20 @@ class ConnectionSyncPage extends BasePage {
            handler: (context) => Navigator.of(context).pushNamed(Routes.manageNodes),
          ),
          const StandardListSeparator(padding: EdgeInsets.symmetric(horizontal: 24)),
+          if (dashboardViewModel.wallet.type == WalletType.ethereum) ...[
+            WalletConnectTile(
+              onTap: () async {
+                Navigator.of(context).push(
+                  MaterialPageRoute(
+                    builder: (context) {
+                      return WalletConnectConnectionsView(web3walletService: web3walletService);
+                    },
+                  ),
+                );
+              },
+            ),
+            const StandardListSeparator(padding: EdgeInsets.symmetric(horizontal: 24)),
+          ]
        ],
      ),
    );
@@ -0,0 +1,46 @@
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
+import 'package:cake_wallet/themes/extensions/transaction_trade_theme.dart';
+import 'package:flutter/material.dart';
+
+class WalletConnectTile extends StatelessWidget {
+  const WalletConnectTile({required this.onTap});
+
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Padding(
+        padding: EdgeInsets.all(24),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: <Widget>[
+            Image.asset(
+              'assets/images/walletconnect_logo.png',
+              height: 24,
+              width: 24,
+            ),
+            SizedBox(width: 16),
+            Expanded(
+              child: Text(
+                S.current.walletConnect,
+                style: TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.normal,
+                  color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                ),
+              ),
+            ),
+            Image.asset(
+              'assets/images/select_arrow.png',
+              color: Theme.of(context).extension<TransactionTradeTheme>()!.detailsTitlesColor,
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,71 @@
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/src/screens/wallet_connect/widgets/connection_widget.dart';
+import 'package:walletconnect_flutter_v2/walletconnect_flutter_v2.dart';
+
+import '../../../../core/wallet_connect/models/connection_model.dart';
+
+class ConnectionWidgetBuilder {
+  static List<ConnectionWidget> buildFromRequiredNamespaces(
+    Map<String, RequiredNamespace> requiredNamespaces,
+  ) {
+    final List<ConnectionWidget> views = [];
+    for (final key in requiredNamespaces.keys) {
+      RequiredNamespace ns = requiredNamespaces[key]!;
+      final List<ConnectionModel> models = [];
+      // If the chains property is present, add the chain data to the models
+      if (ns.chains != null) {
+        models.add(ConnectionModel(title: S.current.chains, elements: ns.chains!));
+      }
+      models.add(ConnectionModel(title: S.current.methods, elements: ns.methods));
+      models.add(ConnectionModel(title: S.current.events, elements: ns.events));
+
+      views.add(ConnectionWidget(title: key, info: models));
+    }
+
+    return views;
+  }
+
+  static List<ConnectionWidget> buildFromNamespaces(
+    String topic,
+    Map<String, Namespace> namespaces,
+    Web3Wallet web3wallet,
+  ) {
+    final List<ConnectionWidget> views = [];
+    for (final key in namespaces.keys) {
+      final Namespace ns = namespaces[key]!;
+      final List<ConnectionModel> models = [];
+      // If the chains property is present, add the chain data to the models
+      models.add(
+        ConnectionModel(
+          title: S.current.chains,
+          elements: ns.accounts,
+        ),
+      );
+      models.add(ConnectionModel(
+        title: S.current.methods,
+        elements: ns.methods,
+      ));
+
+      Map<String, void Function()> actions = {};
+      for (final String event in ns.events) {
+        actions[event] = () async {
+          final String chainId = NamespaceUtils.isValidChainId(key)
+              ? key
+              : NamespaceUtils.getChainFromAccount(ns.accounts.first);
+          await web3wallet.emitSessionEvent(
+            topic: topic,
+            chainId: chainId,
+            event: SessionEventParams(name: event, data: '${S.current.event}: $event'),
+          );
+        };
+      }
+      models.add(
+        ConnectionModel(title: S.current.events, elements: ns.events, elementActions: actions),
+      );
+
+      views.add(ConnectionWidget(title: key, info: models));
+    }
+
+    return views;
+  }
+}
@@ -0,0 +1,16 @@
+import 'dart:convert';
+
+import 'package:convert/convert.dart';
+
+extension StringParsing on String {
+  String get utf8Message {
+    if (startsWith('0x')) {
+      final List<int> decoded = hex.decode(
+        substring(2),
+      );
+      return utf8.decode(decoded);
+    }
+
+    return this;
+  }
+}
@@ -0,0 +1,142 @@
+import 'dart:developer';
+import 'package:cake_wallet/core/wallet_connect/web3wallet_service.dart';
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/src/screens/base_page.dart';
+import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
+import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_mobx/flutter_mobx.dart';
+import 'package:walletconnect_flutter_v2/walletconnect_flutter_v2.dart';
+import 'package:cake_wallet/entities/qr_scanner.dart';
+import 'package:cake_wallet/src/widgets/primary_button.dart';
+import 'package:cake_wallet/utils/show_pop_up.dart';
+
+import 'widgets/pairing_item_widget.dart';
+import 'wc_pairing_detail_page.dart';
+
+class WalletConnectConnectionsView extends StatelessWidget {
+  final Web3WalletService web3walletService;
+
+  WalletConnectConnectionsView({required this.web3walletService, Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return WCPairingsWidget(web3walletService: web3walletService);
+  }
+}
+
+class WCPairingsWidget extends BasePage {
+  WCPairingsWidget({required this.web3walletService, Key? key})
+      : web3wallet = web3walletService.getWeb3Wallet();
+
+  final Web3Wallet web3wallet;
+  final Web3WalletService web3walletService;
+
+  @override
+  String get title => S.current.walletConnect;
+
+  Future<void> _onScanQrCode(BuildContext context, Web3Wallet web3Wallet) async {
+    final String? uri = await presentQRScanner();
+
+    if (uri == null) return _invalidUriToast(context, S.current.nullURIError);
+
+    try {
+      log('_onFoundUri: $uri');
+      final Uri uriData = Uri.parse(uri);
+      await web3Wallet.pair(uri: uriData);
+    } on WalletConnectError catch (e) {
+      await _invalidUriToast(context, e.message);
+    } catch (e) {
+      await _invalidUriToast(context, e.toString());
+    }
+  }
+
+  Future<void> _invalidUriToast(BuildContext context, String message) async {
+    await showPopUp<void>(
+      context: context,
+      builder: (BuildContext context) {
+        return AlertWithOneAction(
+          alertTitle: S.of(context).error,
+          alertContent: message,
+          buttonText: S.of(context).ok,
+          buttonAction: Navigator.of(context).pop,
+          alertBarrierDismissible: false,
+        );
+      },
+    );
+  }
+
+  @override
+  Widget body(BuildContext context) {
+    return Observer(
+      builder: (context) {
+        return Column(
+          children: [
+            Padding(
+              padding: EdgeInsets.symmetric(horizontal: 24),
+              child: Column(
+                children: [
+                  SizedBox(height: 24),
+                  Text(
+                    S.current.connectWalletPrompt,
+                    style: TextStyle(
+                      fontSize: 16.0,
+                      fontWeight: FontWeight.normal,
+                      color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                    ),
+                  ),
+                  SizedBox(height: 16),
+                  PrimaryButton(
+                    text: S.current.newConnection,
+                    color: Theme.of(context).primaryColor,
+                    textColor: Colors.white,
+                    onPressed: () => _onScanQrCode(context, web3wallet),
+                  ),
+                ],
+              ),
+            ),
+            SizedBox(height: 48),
+            Expanded(
+              child: Visibility(
+                visible: web3walletService.pairings.isEmpty,
+                child: Center(
+                  child: Text(
+                    S.current.activeConnectionsPrompt,
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      fontSize: 16.0,
+                      fontWeight: FontWeight.normal,
+                      color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                    ),
+                  ),
+                ),
+                replacement: ListView.builder(
+                  itemCount: web3walletService.pairings.length,
+                  itemBuilder: (BuildContext context, int index) {
+                    final pairing = web3walletService.pairings[index];
+                    return PairingItemWidget(
+                      key: ValueKey(pairing.topic),
+                      pairing: pairing,
+                      onTap: () {
+                        Navigator.push(
+                          context,
+                          MaterialPageRoute(
+                            builder: (context) => WalletConnectPairingDetailsPage(
+                              pairing: pairing,
+                              web3walletService: web3walletService,
+                            ),
+                          ),
+                        );
+                      },
+                    );
+                  },
+                ),
+              ),
+            ),
+            SizedBox(height: 48),
+          ],
+        );
+      },
+    );
+  }
+}
@@ -0,0 +1,186 @@
+import 'dart:developer';
+
+import 'package:cake_wallet/core/wallet_connect/web3wallet_service.dart';
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/src/screens/base_page.dart';
+import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
+import 'package:cake_wallet/src/widgets/primary_button.dart';
+import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
+import 'package:cake_wallet/utils/show_pop_up.dart';
+import 'package:flutter/material.dart';
+import 'package:walletconnect_flutter_v2/walletconnect_flutter_v2.dart';
+
+import 'utils/namespace_model_builder.dart';
+
+class WalletConnectPairingDetailsPage extends StatefulWidget {
+  final PairingInfo pairing;
+  final Web3WalletService web3walletService;
+
+  const WalletConnectPairingDetailsPage({
+    required this.pairing,
+    required this.web3walletService,
+    super.key,
+  });
+
+  @override
+  WalletConnectPairingDetailsPageState createState() => WalletConnectPairingDetailsPageState();
+}
+
+class WalletConnectPairingDetailsPageState extends State<WalletConnectPairingDetailsPage> {
+  List<Widget> sessionWidgets = [];
+  late String expiryDate;
+  @override
+  void initState() {
+    super.initState();
+    initDateTime();
+    initSessions();
+  }
+
+  void initDateTime() {
+    DateTime dateTime = DateTime.fromMillisecondsSinceEpoch(widget.pairing.expiry * 1000);
+    int year = dateTime.year;
+    int month = dateTime.month;
+    int day = dateTime.day;
+
+    expiryDate = '$year-${month.toString().padLeft(2, '0')}-${day.toString().padLeft(2, '0')}';
+  }
+
+  void initSessions() {
+    List<SessionData> sessions = widget.web3walletService.getSessionsForPairingInfo(widget.pairing);
+
+    for (final SessionData session in sessions) {
+      List<Widget> namespaceWidget = ConnectionWidgetBuilder.buildFromNamespaces(
+        session.topic,
+        session.namespaces,
+        widget.web3walletService.getWeb3Wallet(),
+      );
+      // Loop through and add the namespace widgets, but put 20 pixels between each one
+      for (int i = 0; i < namespaceWidget.length; i++) {
+        sessionWidgets.add(namespaceWidget[i]);
+        if (i != namespaceWidget.length - 1) {
+          sessionWidgets.add(const SizedBox(height: 20.0));
+        }
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return WCCDetailsWidget(
+      widget.pairing,
+      expiryDate,
+      sessionWidgets,
+      widget.web3walletService,
+    );
+  }
+}
+
+class WCCDetailsWidget extends BasePage {
+  WCCDetailsWidget(
+    this.pairing,
+    this.expiryDate,
+    this.sessionWidgets,
+    this.web3walletService,
+  );
+
+  final PairingInfo pairing;
+  final String expiryDate;
+  final List<Widget> sessionWidgets;
+  final Web3WalletService web3walletService;
+
+  @override
+  Widget body(BuildContext context) {
+    return Scaffold(
+      body: SingleChildScrollView(
+        child: Container(
+          padding: const EdgeInsets.all(8),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Flexible(
+                child: CircleAvatar(
+                  backgroundImage: (pairing.peerMetadata!.icons.isNotEmpty
+                          ? NetworkImage(pairing.peerMetadata!.icons[0])
+                          : const AssetImage('assets/images/default_icon.png'))
+                      as ImageProvider<Object>,
+                ),
+              ),
+              const SizedBox(height: 20.0),
+              Text(
+                pairing.peerMetadata!.name,
+                style: TextStyle(
+                  fontSize: 16.0,
+                  fontWeight: FontWeight.w500,
+                  color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                ),
+              ),
+              const SizedBox(height: 16.0),
+              Text(
+                pairing.peerMetadata!.url,
+                style: TextStyle(
+                  fontSize: 14.0,
+                  fontWeight: FontWeight.normal,
+                  color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                ),
+              ),
+              const SizedBox(height: 8.0),
+              Text(
+                '${S.current.expiresOn}: $expiryDate',
+                style: TextStyle(
+                  fontSize: 14.0,
+                  fontWeight: FontWeight.normal,
+                  color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                ),
+              ),
+              const SizedBox(height: 20.0),
+              Column(
+                mainAxisAlignment: MainAxisAlignment.start,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: sessionWidgets,
+              ),
+              const SizedBox(height: 20.0),
+              PrimaryButton(
+                onPressed: () =>
+                    _onDeleteButtonPressed(context, pairing.peerMetadata!.name, web3walletService),
+                text: S.current.delete,
+                color: Theme.of(context).primaryColor,
+                textColor: Colors.white,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Future<void> _onDeleteButtonPressed(
+      BuildContext context, String dAppName, Web3WalletService web3walletService) async {
+    bool confirmed = false;
+
+    await showPopUp<void>(
+      context: context,
+      builder: (BuildContext dialogContext) {
+        return AlertWithTwoActions(
+          alertTitle: S.of(context).delete,
+          alertContent: '${S.current.deleteConnectionConfirmationPrompt} $dAppName?',
+          leftButtonText: S.of(context).cancel,
+          rightButtonText: S.of(context).delete,
+          actionLeftButton: () => Navigator.of(dialogContext).pop(),
+          actionRightButton: () {
+            confirmed = true;
+            Navigator.of(dialogContext).pop();
+          },
+        );
+      },
+    );
+    if (confirmed) {
+      try {
+        await web3walletService.disconnectSession(pairing.topic);
+
+        Navigator.of(context).pop();
+      } catch (e) {
+        log(e.toString());
+      }
+    }
+  }
+}
@@ -0,0 +1,102 @@
+import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
+import 'package:flutter/material.dart';
+import '../../../../core/wallet_connect/models/connection_model.dart';
+
+class ConnectionItemWidget extends StatelessWidget {
+  const ConnectionItemWidget({required this.model, Key? key}) : super(key: key);
+
+  final ConnectionModel model;
+
+  @override
+  Widget build(BuildContext context) {
+    
+    return Container(
+      width: double.infinity,
+      decoration: BoxDecoration(
+        color: Theme.of(context).cardColor,
+        borderRadius: BorderRadius.circular(8),
+      ),
+      padding: const EdgeInsets.all(8),
+      margin: const EdgeInsetsDirectional.only(top: 8),
+      child: Visibility(
+        visible: model.elements != null,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              model.title ?? '',
+              style: TextStyle(
+                color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                fontSize: 14,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+            const SizedBox(height: 8),
+            if (model.elements != null)
+            Wrap(
+              spacing: 4,
+              runSpacing: 4,
+              direction: Axis.horizontal,
+              children: model.elements!
+                  .map((e) => _ModelElementWidget(model: model, modelElement: e))
+                  .toList(),
+            ),
+          ],
+        ),
+        replacement: _NoModelElementWidget(model: model),
+      ),
+    );
+  }
+}
+
+class _NoModelElementWidget extends StatelessWidget {
+  const _NoModelElementWidget({required this.model});
+
+  final ConnectionModel model;
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      model.text!,
+      style: TextStyle(
+        color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+        fontSize: 14,
+        fontWeight: FontWeight.w600,
+      ),
+    );
+  }
+}
+
+class _ModelElementWidget extends StatelessWidget {
+  const _ModelElementWidget({
+    required this.model,
+    required this.modelElement,
+  });
+
+  final ConnectionModel model;
+  final String modelElement;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: model.elementActions != null ? model.elementActions![modelElement] : null,
+      child: Container(
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.background,
+          borderRadius: BorderRadius.circular(6),
+        ),
+        padding: const EdgeInsets.all(8),
+        child: Text(
+          modelElement,
+          style: TextStyle(
+            color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+            fontSize: 14,
+            fontWeight: FontWeight.w600,
+          ),
+          maxLines: 10,
+          overflow: TextOverflow.ellipsis,
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,166 @@
+// ignore_for_file: public_member_api_docs, sort_constructors_first
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:flutter/material.dart';
+import 'package:walletconnect_flutter_v2/walletconnect_flutter_v2.dart';
+
+import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
+
+import '../../../../core/wallet_connect/models/auth_request_model.dart';
+import '../../../../core/wallet_connect/models/connection_model.dart';
+import '../../../../core/wallet_connect/models/session_request_model.dart';
+import '../utils/namespace_model_builder.dart';
+import 'connection_widget.dart';
+
+class ConnectionRequestWidget extends StatefulWidget {
+  const ConnectionRequestWidget({
+    required this.wallet,
+    this.authRequest,
+    this.sessionProposal,
+    Key? key,
+  }) : super(key: key);
+
+  final Web3Wallet wallet;
+  final AuthRequestModel? authRequest;
+  final SessionRequestModel? sessionProposal;
+
+  @override
+  State<ConnectionRequestWidget> createState() => _ConnectionRequestWidgetState();
+}
+
+class _ConnectionRequestWidgetState extends State<ConnectionRequestWidget> {
+  ConnectionMetadata? metadata;
+
+  @override
+  void initState() {
+    super.initState();
+    // Get the connection metadata
+    metadata = widget.authRequest?.request.requester ?? widget.sessionProposal?.request.proposer;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (metadata == null) {
+      return Text(
+        S.current.error,
+        style: TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.normal,
+          color: Theme.of(context).extension<CakeTextTheme>()!.secondaryTextColor,
+        ),
+      );
+    }
+
+    return _ConnectionMetadataDisplayWidget(
+      metadata: metadata,
+      authRequest: widget.authRequest,
+      sessionProposal: widget.sessionProposal,
+      wallet: widget.wallet,
+    );
+  }
+}
+
+class _ConnectionMetadataDisplayWidget extends StatelessWidget {
+  const _ConnectionMetadataDisplayWidget({
+    required this.metadata,
+    required this.wallet,
+    this.authRequest,
+    required this.sessionProposal,
+  });
+
+  final ConnectionMetadata? metadata;
+  final Web3Wallet wallet;
+  final AuthRequestModel? authRequest;
+  final SessionRequestModel? sessionProposal;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Color.fromARGB(255, 18, 18, 19),
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            metadata!.metadata.name,
+            style: TextStyle(
+              fontSize: 16,
+              fontWeight: FontWeight.normal,
+              color: Theme.of(context).extension<CakeTextTheme>()!.secondaryTextColor,
+            ),
+            textAlign: TextAlign.center,
+          ),
+          Text(
+            S.current.wouoldLikeToConnect,
+            style: TextStyle(
+              fontSize: 14,
+              fontWeight: FontWeight.normal,
+              color: Theme.of(context).extension<CakeTextTheme>()!.secondaryTextColor,
+            ),
+            textAlign: TextAlign.center,
+          ),
+          const SizedBox(height: 8),
+          Text(
+            metadata!.metadata.url,
+            style: TextStyle(
+              fontSize: 16.0,
+              fontWeight: FontWeight.normal,
+              color: Theme.of(context).extension<CakeTextTheme>()!.secondaryTextColor,
+            ),
+            textAlign: TextAlign.center,
+          ),
+          const SizedBox(height: 8),
+          Visibility(
+            visible: authRequest != null,
+            child: _AuthRequestWidget(wallet: wallet, authRequest: authRequest),
+
+            //If authRequest is null, sessionProposal is not null.
+            replacement: _SessionProposalWidget(sessionProposal: sessionProposal!),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _AuthRequestWidget extends StatelessWidget {
+  const _AuthRequestWidget({required this.wallet, this.authRequest});
+
+  final Web3Wallet wallet;
+  final AuthRequestModel? authRequest;
+
+  @override
+  Widget build(BuildContext context) {
+    final model = ConnectionModel(
+      text: wallet.formatAuthMessage(
+        iss: 'did:pkh:eip155:1:${authRequest!.iss}',
+        cacaoPayload: CacaoRequestPayload.fromPayloadParams(
+          authRequest!.request.payloadParams,
+        ),
+      ),
+    );
+    return ConnectionWidget(
+      title: S.current.message,
+      info: [model],
+    );
+  }
+}
+
+class _SessionProposalWidget extends StatelessWidget {
+  const _SessionProposalWidget({required this.sessionProposal});
+
+  final SessionRequestModel sessionProposal;
+
+  @override
+  Widget build(BuildContext context) {
+    // Create the connection models using the required and optional namespaces provided by the proposal data
+    // The key is the title and the list of values is the data
+    final List<ConnectionWidget> views = ConnectionWidgetBuilder.buildFromRequiredNamespaces(
+      sessionProposal.request.requiredNamespaces,
+    );
+
+    return Column(children: views);
+  }
+}
@@ -0,0 +1,45 @@
+import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
+import 'package:flutter/material.dart';
+
+import '../../../../core/wallet_connect/models/connection_model.dart';
+import 'connection_item_widget.dart';
+
+class ConnectionWidget extends StatelessWidget {
+  const ConnectionWidget({required this.title, required this.info, super.key});
+
+  final String title;
+  final List<ConnectionModel> info;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Theme.of(context).primaryColorLight,
+        borderRadius: BorderRadius.circular(8),
+      ),
+      padding: const EdgeInsets.all(8),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Container(
+            decoration: BoxDecoration(
+              color: Theme.of(context).colorScheme.background,
+              borderRadius: BorderRadius.circular(8),
+            ),
+            padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
+            child: Text(
+              title,
+              style: TextStyle(
+                fontSize: 16,
+                fontWeight: FontWeight.w600,
+                color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+              ),
+            ),
+          ),
+          const SizedBox(height: 8),
+          ...info.map((e) => ConnectionItemWidget(model: e)),
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,36 @@
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:flutter/material.dart';
+
+class BottomSheetMessageDisplayWidget extends StatelessWidget {
+  final String message;
+  final bool isError;
+
+  const BottomSheetMessageDisplayWidget({super.key, required this.message, this.isError = true});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          isError ? S.current.error : S.current.successful,
+          style: TextStyle(
+            fontSize: 16,
+            fontWeight: FontWeight.normal,
+            color: Colors.white,
+          ),
+        ),
+        SizedBox(height: 8),
+        Text(
+          message,
+          style: TextStyle(
+            fontSize: 14,
+            fontWeight: FontWeight.normal,
+            color: Colors.white,
+          ),
+        ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,62 @@
+import 'package:cake_wallet/core/wallet_connect/wc_bottom_sheet_service.dart';
+import 'package:flutter/material.dart';
+
+import '../../../../../core/wallet_connect/models/bottom_sheet_queue_item_model.dart';
+
+class BottomSheetListener extends StatefulWidget {
+  final BottomSheetService bottomSheetService;
+  final Widget child;
+
+  const BottomSheetListener({
+    required this.child,
+    required this.bottomSheetService,
+    super.key,
+  });
+
+  @override
+  BottomSheetListenerState createState() => BottomSheetListenerState();
+}
+
+class BottomSheetListenerState extends State<BottomSheetListener> {
+
+  @override
+  void initState() {
+    super.initState();
+    widget.bottomSheetService.currentSheet.addListener(_showBottomSheet);
+  }
+
+  @override
+  void dispose() {
+    widget.bottomSheetService.currentSheet.removeListener(_showBottomSheet);
+    super.dispose();
+  }
+
+  Future<void> _showBottomSheet() async {
+    if (widget.bottomSheetService.currentSheet.value != null) {
+      BottomSheetQueueItemModel item = widget.bottomSheetService.currentSheet.value!;
+      final value = await showModalBottomSheet(
+        context: context,
+        isDismissible: item.isModalDismissible,
+        backgroundColor: Color.fromARGB(0, 0, 0, 0),
+        isScrollControlled: true,
+        constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.9),
+        builder: (context) {
+          return Container(
+            decoration: const BoxDecoration(
+              color: Color.fromARGB(255, 18, 18, 19),
+              borderRadius: BorderRadius.all(Radius.circular(16)),
+            ),
+            padding: const EdgeInsets.all(16),
+            margin: const EdgeInsets.all(16),
+            child: item.widget,
+          );
+        },
+      );
+      item.completer.complete(value);
+      widget.bottomSheetService.resetCurrentSheet();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) => widget.child;
+}
@@ -0,0 +1,48 @@
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/src/widgets/primary_button.dart';
+import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
+import 'package:flutter/material.dart';
+
+class Web3RequestModal extends StatelessWidget {
+  const Web3RequestModal({required this.child, this.onAccept, this.onReject, super.key});
+
+  final Widget child;
+  final VoidCallback? onAccept;
+  final VoidCallback? onReject;
+  
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          child,
+          const SizedBox(height: 16),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+             
+              Expanded(
+                child: PrimaryButton(
+                  onPressed: onReject ?? () => Navigator.of(context).pop(false),
+                  text: S.current.reject,
+                  color: Theme.of(context).colorScheme.error,
+                  textColor: Theme.of(context).colorScheme.onError,
+                ),
+              ),
+              const SizedBox(width: 16),
+              Expanded(
+                child: PrimaryButton(
+                  onPressed: onAccept ?? () => Navigator.of(context).pop(true),
+                  text: S.current.approve,
+                  color: Theme.of(context).primaryColor,
+                  textColor: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                ),
+              ),       
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,82 @@
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
+import 'package:cake_wallet/themes/extensions/receive_page_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:walletconnect_flutter_v2/apis/core/pairing/utils/pairing_models.dart';
+
+class PairingItemWidget extends StatelessWidget {
+  const PairingItemWidget({required this.pairing, required this.onTap, super.key});
+
+  final PairingInfo pairing;
+  final void Function() onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    PairingMetadata? metadata = pairing.peerMetadata;
+    if (metadata == null) {
+      return SizedBox.shrink();
+    }
+
+    DateTime dateTime = DateTime.fromMillisecondsSinceEpoch(pairing.expiry * 1000);
+    int year = dateTime.year;
+    int month = dateTime.month;
+    int day = dateTime.day;
+
+    String expiryDate =
+        '$year-${month.toString().padLeft(2, '0')}-${day.toString().padLeft(2, '0')}';
+
+    return ListTile(
+      leading: CircleAvatar(
+        backgroundImage: (metadata.icons.isNotEmpty
+            ? NetworkImage(metadata.icons[0])
+            : const AssetImage(
+                'assets/images/default_icon.png',
+              )) as ImageProvider<Object>,
+      ),
+      title: Text(
+        metadata.name,
+        style: TextStyle(
+          fontSize: 16.0,
+          fontWeight: FontWeight.w700,
+          color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+        ),
+      ),
+      subtitle: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            metadata.url,
+            style: TextStyle(
+              fontSize: 14.0,
+              fontWeight: FontWeight.w700,
+              color: Theme.of(context).extension<CakeTextTheme>()!.secondaryTextColor,
+            ),
+          ),
+          Text(
+            '${S.current.expiresOn}: $expiryDate',
+            style: TextStyle(
+              fontSize: 14.0,
+              fontWeight: FontWeight.w700,
+              color: Theme.of(context).extension<CakeTextTheme>()!.secondaryTextColor,
+            ),
+          ),
+        ],
+      ),
+      trailing: Container(
+        height: 40,
+        width: 44,
+        padding: EdgeInsets.all(10),
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          color: Theme.of(context).extension<ReceivePageTheme>()!.iconsBackgroundColor,
+        ),
+        child: Icon(
+          Icons.edit,
+          size: 14,
+          color: Theme.of(context).extension<ReceivePageTheme>()!.iconsColor,
+        ),
+      ),
+      onTap: onTap,
+    );
+  }
+}