REF: Allow modal and stack

loc/en.json

@@ -627,7 +627,6 @@
     "pay_this_contact": "Pay this contact",
     "rename_contact": "Rename contact",
     "copy_payment_code": "Copy Payment Code",
-    "copied": "Copied",
     "rename": "Rename",
     "provide_name": "Provide new name for this contact",
     "add_contact": "Add Contact",

navigation/DetailViewScreensStack.tsx

@@ -72,6 +72,7 @@ import ViewEditMultisigCosignersStackRoot from './ViewEditMultisigCosignersStack
 import WalletExportStack from './WalletExportStack';
 import WalletXpubStackRoot from './WalletXpubStack';
 import { StackActions } from '@react-navigation/native';
+import PaymentCodeStackRoot from './PaymentCodeStack';
 
 const DetailViewStackScreensStack = () => {
   const theme = useTheme();
@@ -220,6 +221,8 @@ const DetailViewStackScreensStack = () => {
           closeButtonFunc: popToTop,
         })(theme)}
       />
+      <DetailViewStack.Screen name="PaymentCodeListRoot" component={PaymentCodeStackRoot} options={NavigationDefaultOptions} />
+
       <DetailViewStack.Screen
         name="LnurlPaySuccess"
         component={LnurlPaySuccess}

navigation/DetailViewStackParamList.ts

@@ -113,6 +113,12 @@ export type DetailViewStackParamList = {
       animatedQRCodeData?: Record<string, any>;
     };
   };
-  PaymentCodeRoot: undefined;
+  PaymentCodeListRoot: {
+    screen: 'PaymentCodeList';
+    params: {
+      paymentCode: string;
+      walletID: string;
+    };
+  };
   ReorderWallets: undefined;
 };

navigation/LazyLoadPaymentCodeStack.tsx

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+
+import { LazyLoadingIndicator } from './LazyLoadingIndicator';
+
+const PaymentCodesList = lazy(() => import('../screen/wallets/PaymentCodesList'));
+
+export const PaymentCodesListComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <PaymentCodesList />
+  </Suspense>
+);

navigation/PaymentCodeStack.tsx

@@ -0,0 +1,25 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import React from 'react';
+import navigationStyle from '../components/navigationStyle';
+import { useTheme } from '../components/themes';
+import loc from '../loc'; // Assuming 'loc' is used for localization
+import { PaymentCodesListComponent } from './LazyLoadPaymentCodeStack';
+import { PaymentCodeStackParamList } from './PaymentCodeStackParamList';
+
+const Stack = createNativeStackNavigator<PaymentCodeStackParamList>();
+
+const PaymentCodeStackRoot = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator screenOptions={{ headerShadowVisible: false }} initialRouteName="PaymentCodesList">
+      <Stack.Screen
+        name="PaymentCodesList"
+        component={PaymentCodesListComponent}
+        options={navigationStyle({ title: loc.bip47.contacts, closeButton: true })(theme)}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default PaymentCodeStackRoot;

navigation/PaymentCodeStackParamList.ts

@@ -0,0 +1,17 @@
+import { BitcoinUnit } from '../models/bitcoinUnits';
+
+export type PaymentCodeStackParamList = {
+  PaymentCode: { paymentCode: string };
+  PaymentCodesList: {
+    memo: string;
+    address: string;
+    walletID: string;
+    amount: number;
+    amountSats: number;
+    unit: BitcoinUnit;
+    noRbf: boolean;
+    launchedBy: string;
+    isEditable: boolean;
+    uri: string /* payjoin uri */;
+  };
+};

navigation/SendDetailsStack.tsx

@@ -77,7 +77,7 @@ const SendDetailsStack = () => {
       />
       <Stack.Screen name="CoinControl" component={CoinControlComponent} options={navigationStyle({ title: loc.cc.header })(theme)} />
       <Stack.Screen
-        name="PaymentCodesList"
+        name="PaymentCodeList"
         component={PaymentCodesListComponent}
         options={navigationStyle({ title: loc.bip47.contacts })(theme)}
       />

navigation/SendDetailsStackParamList.ts

@@ -3,27 +3,6 @@ import { CreateTransactionTarget, CreateTransactionUtxo, TWallet } from '../clas
 import { BitcoinUnit, Chain } from '../models/bitcoinUnits';
 
 export type SendDetailsStackParamList = {
-  SendDetailsRoot: {
-    screen: string;
-    params: {
-      memo?: string;
-      address?: string;
-      walletID: string;
-      amount?: number;
-      amountSats?: number;
-      unit?: BitcoinUnit;
-      noRbf?: boolean;
-      launchedBy?: string;
-      isEditable?: boolean;
-      uri?: string;
-      addRecipientParams?: {
-        address: string;
-        amount?: number;
-        memo?: string;
-      };
-    };
-    merge: boolean;
-  };
   SendDetails: {
     memo: string;
     address: string;
@@ -96,7 +75,7 @@ export type SendDetailsStackParamList = {
     walletID: string;
     onUTXOChoose: (u: CreateTransactionUtxo[]) => void;
   };
-  PaymentCodesList: {
+  PaymentCodeList: {
     walletID: string;
   };
   ScanQRCodeRoot: {

screen/send/SendDetails.tsx

@@ -77,6 +77,7 @@ type RouteProps = RouteProp<SendDetailsStackParamList, 'SendDetails'>;
 const SendDetails = () => {
   const { wallets, setSelectedWalletID, sleep, txMetadata, saveToDisk } = useStorage();
   const navigation = useExtendedNavigation<NavigationProps>();
+  const setParams = navigation.setParams;
   const route = useRoute<RouteProps>();
   const name = route.name;
   const routeParams = route.params;
@@ -171,6 +172,8 @@ const SendDetails = () => {
         return [...addrs];
       });
     }
+    setParams({ addRecipientParams: undefined });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [routeParams.addRecipientParams]);
 
   useEffect(() => {
@@ -891,7 +894,7 @@ const SendDetails = () => {
   const handleInsertContact = () => {
     if (!wallet) return;
     setOptionsVisible(false);
-    navigation.navigate('PaymentCodesList', { walletID: wallet.getID() });
+    navigation.navigate('PaymentCodeList', { walletID: wallet.getID() });
   };
 
   const handlePsbtSign = async () => {

screen/wallets/PaymentCodesList.tsx

@@ -4,7 +4,7 @@ import { RouteProp, useRoute } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import assert from 'assert';
 import createHash from 'create-hash';
-import { SectionList, StyleSheet, Text, View } from 'react-native';
+import { SectionList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import * as BlueElectrum from '../../blue_modules/BlueElectrum';
 import { satoshiToLocalCurrency } from '../../blue_modules/currency';
 import { BlueLoading } from '../../BlueComponents';
@@ -23,12 +23,14 @@ import { BitcoinUnit } from '../../models/bitcoinUnits';
 import SafeArea from '../../components/SafeArea';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import { useStorage } from '../../hooks/context/useStorage';
+import { DetailViewStackParamList } from '../../navigation/DetailViewStackParamList';
 import { SendDetailsStackParamList } from '../../navigation/SendDetailsStackParamList';
 
 interface DataSection {
   title: string;
   data: string[];
 }
+
 enum Actions {
   pay,
   rename,
@@ -66,13 +68,16 @@ function onlyUnique(value: any, index: number, self: any[]) {
   return self.indexOf(value) === index;
 }
 
-type PaymentCodeListRouteProp = RouteProp<SendDetailsStackParamList, 'PaymentCodesList'>;
-type PaymentCodesListNavigationProp = NativeStackNavigationProp<SendDetailsStackParamList, 'PaymentCodesList'>;
+type PaymentCodeListModalProp = RouteProp<DetailViewStackParamList, 'PaymentCodeListRoot'>;
+type PaymentCodesListModalNavigationProp = NativeStackNavigationProp<DetailViewStackParamList, 'PaymentCodeListRoot'>;
+
+type PaymentCodeListRouteProp = RouteProp<SendDetailsStackParamList, 'PaymentCodeList'>;
+type PaymentCodesListNavigationProp = NativeStackNavigationProp<SendDetailsStackParamList, 'PaymentCodeList'>;
 
 export default function PaymentCodesList() {
-  const route = useRoute<PaymentCodeListRouteProp>();
-  const navigation = useExtendedNavigation<PaymentCodesListNavigationProp>();
-  const { walletID } = route.params;
+  const { params } = useRoute<PaymentCodeListModalProp & PaymentCodeListRouteProp>();
+  const navigation = useExtendedNavigation<PaymentCodesListModalNavigationProp & PaymentCodesListNavigationProp>();
+  const { walletID } = params;
   const { wallets, txMetadata, counterpartyMetadata, saveToDisk } = useStorage();
   const [reload, setReload] = useState<number>(0);
   const [data, setData] = useState<DataSection[]>([]);
@@ -105,7 +110,6 @@ export default function PaymentCodesList() {
   const onToolTipPress = async (id: any, pc: string) => {
     if (String(id) === String(Actions.copyToClipboard)) {
       Clipboard.setString(pc);
-      presentAlert({ message: loc.bip47.copied });
     }
 
     if (String(id) === String(Actions.rename)) {
@@ -160,6 +164,22 @@ export default function PaymentCodesList() {
 
     const displayName = shortenContactName(counterpartyMetadata?.[pc]?.label ?? pc);
 
+    const isFirstRouteInStack = navigation.getState().index === 0;
+
+    if (isFirstRouteInStack) {
+      return (
+        <TouchableOpacity onPress={() => _navigateToSend(pc)}>
+          <View style={styles.contactRowContainer}>
+            <View style={[styles.circle, { backgroundColor: '#' + color }]} />
+            <View style={styles.contactRowBody}>
+              <Text style={[styles.contactRowNameText, { color: colors.labelText }]}>{displayName}</Text>
+            </View>
+          </View>
+          <View style={styles.stick} />
+        </TouchableOpacity>
+      );
+    }
+
     return (
       <ToolTipMenu
         actions={toolTipActions}
@@ -185,7 +205,7 @@ export default function PaymentCodesList() {
 
       await _addContact(newPc);
     } catch (error: any) {
-      presentAlert({ message: error.message });
+      console.debug(error.message);
     } finally {
       setIsLoading(false);
     }