feat: add modal explainer for pending payment clock icon in NWC header

Author: a-khushal

locales/en.json

@@ -1620,6 +1620,7 @@
     "views.Settings.Ecash.sweepThresholdSatsTitle": "Mint sweep threshold",
     "views.Settings.Ecash.sweepThresholdSatsTitle.description": "Funds will be automatically swept to your self-custodial wallet if the balance you have with a mint exceeds this threshold.",
     "views.Settings.NostrWalletConnect.title": "Nostr Wallet Connect service",
+    "views.Settings.NWC.title": "NWC service",
     "views.Settings.NostrWalletConnect.connections": "Connections",
     "views.Settings.NostrWalletConnect.noConnections": "No connections created yet. Create a connection to allow external apps to connect to your wallet.",
     "views.Settings.NostrWalletConnect.connectionName": "Connection Name",
@@ -1711,6 +1712,10 @@
     "views.Settings.NostrWalletConnect.error.failedToProcessPayments": "Failed to process payments",
     "views.Settings.NostrWalletConnect.error.failedToLoadActivity": "Failed to load activity",
     "views.Settings.NostrWalletConnect.confirmDeletePendingPayments": "Are you sure you want to delete all pending payments?",
+    "views.Settings.NostrWalletConnect.pendingPaymentIcon.title": "Pending Payment Requests",
+    "views.Settings.NostrWalletConnect.pendingPaymentIcon.explainer": "This clock icon indicates that you have pending payment requests from your Nostr Wallet Connect connections. These are payment requests that have been received but not yet processed.",
+    "views.Settings.NostrWalletConnect.pendingPaymentIcon.viewPayments": "View Pending Payments",
+    "views.Settings.NostrWalletConnect.pendingPaymentIcon.accessibilityLabel": "Pending payment requests",
     "views.Settings.NostrWalletConnect.totalSpent": "Total Spent",
     "views.Settings.NostrWalletConnect.remainingBudget": "Remaining Budget",
     "views.Settings.NostrWalletConnect.warning.walletBalanceLowerThanBudget": "Your main wallet balance is lower than this connection’s budget. Please review and update it",

views/Settings/NostrWalletConnect/NWCConnectionsList.tsx

@@ -20,6 +20,7 @@ import { Tag } from '../../../components/Channels/Tag';
 
 import SettingsStore from '../../../stores/SettingsStore';
 import NostrWalletConnectStore from '../../../stores/NostrWalletConnectStore';
+import ModalStore from '../../../stores/ModalStore';
 
 import { themeColor } from '../../../utils/ThemeUtils';
 import { localeString } from '../../../utils/LocaleUtils';
@@ -40,6 +41,7 @@ interface NWCConnectionsListProps {
     navigation: StackNavigationProp<any, any>;
     SettingsStore: SettingsStore;
     NostrWalletConnectStore: NostrWalletConnectStore;
+    ModalStore: ModalStore;
 }
 
 enum ConnectionFilter {
@@ -56,7 +58,7 @@ interface NWCConnectionsListState {
     hasPendingPayments: boolean;
 }
 
-@inject('SettingsStore', 'NostrWalletConnectStore')
+@inject('SettingsStore', 'NostrWalletConnectStore', 'ModalStore')
 @observer
 export default class NWCConnectionsList extends React.Component<
     NWCConnectionsListProps,
@@ -423,7 +425,9 @@ export default class NWCConnectionsList extends React.Component<
                     leftComponent="Back"
                     centerComponent={{
                         text: localeString(
-                            'views.Settings.NostrWalletConnect.title'
+                            hasPendingPayments
+                                ? 'views.Settings.NWC.title'
+                                : 'views.Settings.NostrWalletConnect.title'
                         ),
                         style: {
                             color: themeColor('text'),
@@ -462,11 +466,32 @@ export default class NWCConnectionsList extends React.Component<
                                 </TouchableOpacity>
                                 {hasPendingPayments && (
                                     <TouchableOpacity
-                                        onPress={() =>
-                                            navigation.navigate(
-                                                'NWCPendingPayments'
-                                            )
-                                        }
+                                        onPress={() => {
+                                            const { ModalStore } = this.props;
+                                            ModalStore.toggleInfoModal({
+                                                title: localeString(
+                                                    'views.Settings.NostrWalletConnect.pendingPaymentIcon.title'
+                                                ),
+                                                text: localeString(
+                                                    'views.Settings.NostrWalletConnect.pendingPaymentIcon.explainer'
+                                                ),
+                                                buttons: [
+                                                    {
+                                                        title: localeString(
+                                                            'views.Settings.NostrWalletConnect.pendingPaymentIcon.viewPayments'
+                                                        ),
+                                                        callback: () => {
+                                                            navigation.navigate(
+                                                                'NWCPendingPayments'
+                                                            );
+                                                        }
+                                                    }
+                                                ]
+                                            });
+                                        }}
+                                        accessibilityLabel={localeString(
+                                            'views.Settings.NostrWalletConnect.pendingPaymentIcon.accessibilityLabel'
+                                        )}
                                     >
                                         <ClockIcon
                                             color={themeColor('bitcoin')}