Merge pull request #6598 from BlueWallet/conm

REF: Confirm to TSX

navigation/LazyLoadSendDetailsStack.tsx

@@ -3,7 +3,7 @@ import React, { lazy, Suspense } from 'react';
 import { LazyLoadingIndicator } from './LazyLoadingIndicator';
 
 const SendDetails = lazy(() => import('../screen/send/details'));
-const Confirm = lazy(() => import('../screen/send/confirm'));
+const Confirm = lazy(() => import('../screen/send/Confirm'));
 const PsbtWithHardwareWallet = lazy(() => import('../screen/send/psbtWithHardwareWallet'));
 const CreateTransaction = lazy(() => import('../screen/send/create'));
 const PsbtMultisig = lazy(() => import('../screen/send/psbtMultisig'));

navigation/SendDetailsStack.tsx

@@ -1,5 +1,5 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import navigationStyle, { navigationStyleTx } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
@@ -16,11 +16,13 @@ import {
   SuccessComponent,
 } from './LazyLoadSendDetailsStack';
 import { SendDetailsStackParamList } from './SendDetailsStackParamList';
+import HeaderRightButton from '../components/HeaderRightButton';
 
 const Stack = createNativeStackNavigator<SendDetailsStackParamList>();
 
 const SendDetailsStack = () => {
   const theme = useTheme();
+  const DetailsButton = useMemo(() => <HeaderRightButton testID="Save" disabled={true} title={loc.wallets.create_details} />, []);
 
   return (
     <Stack.Navigator initialRouteName="SendDetails" screenOptions={{ headerShadowVisible: false }}>
@@ -34,7 +36,11 @@ const SendDetailsStack = () => {
         }))(theme)}
         initialParams={{ isEditable: true }} // Correctly typed now
       />
-      <Stack.Screen name="Confirm" component={ConfirmComponent} options={navigationStyle({ title: loc.send.confirm_header })(theme)} />
+      <Stack.Screen
+        name="Confirm"
+        component={ConfirmComponent}
+        options={navigationStyle({ title: loc.send.confirm_header, headerRight: () => DetailsButton })(theme)}
+      />
       <Stack.Screen
         name="PsbtWithHardwareWallet"
         component={PsbtWithHardwareWalletComponent}

navigation/SendDetailsStackParamList.ts

@@ -45,7 +45,10 @@ export type SendDetailsStackParamList = {
     fromWallet: string;
     launchedBy?: string;
   };
-  Success: undefined;
+  Success: {
+    fee: number;
+    amount: number;
+  };
   SelectWallet: {
     onWalletSelect: (wallet: TWallet) => void;
     chainType: Chain;

screen/send/Confirm.tsx

@@ -1,39 +1,88 @@
-import { useNavigation, useRoute } from '@react-navigation/native';
+import React, { useContext, useEffect, useMemo, useReducer } from 'react';
+import { ActivityIndicator, FlatList, TouchableOpacity, StyleSheet, Switch, View } from 'react-native';
+import { Text } from 'react-native-elements';
+import { PayjoinClient } from 'payjoin-client';
 import BigNumber from 'bignumber.js';
 import * as bitcoin from 'bitcoinjs-lib';
-import { PayjoinClient } from 'payjoin-client';
-import PropTypes from 'prop-types';
-import React, { useContext, useEffect, useState } from 'react';
-import { ActivityIndicator, FlatList, StyleSheet, Switch, TouchableOpacity, View } from 'react-native';
-import { Text } from 'react-native-elements';
-
-import * as BlueElectrum from '../../blue_modules/BlueElectrum';
-import { satoshiToBTC, satoshiToLocalCurrency } from '../../blue_modules/currency';
-import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
+import { BlueText, BlueCard } from '../../BlueComponents';
+import { BitcoinUnit } from '../../models/bitcoinUnits';
+import loc, { formatBalance, formatBalanceWithoutSuffix } from '../../loc';
 import Notifications from '../../blue_modules/notifications';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
-import { BlueCard, BlueText } from '../../BlueComponents';
-import PayjoinTransaction from '../../class/payjoin-transaction';
+import { useRoute, RouteProp } from '@react-navigation/native';
 import presentAlert from '../../components/Alert';
-import Button from '../../components/Button';
-import SafeArea from '../../components/SafeArea';
 import { useTheme } from '../../components/themes';
+import Button from '../../components/Button';
+import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
+import SafeArea from '../../components/SafeArea';
+import { satoshiToBTC, satoshiToLocalCurrency } from '../../blue_modules/currency';
+import * as BlueElectrum from '../../blue_modules/BlueElectrum';
 import { useBiometrics } from '../../hooks/useBiometrics';
-import loc, { formatBalance, formatBalanceWithoutSuffix } from '../../loc';
-import { BitcoinUnit } from '../../models/bitcoinUnits';
+import { TWallet, CreateTransactionTarget } from '../../class/wallets/types';
+import PayjoinTransaction from '../../class/payjoin-transaction';
+import debounce from '../../blue_modules/debounce';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { SendDetailsStackParamList } from '../../navigation/SendDetailsStackParamList';
+import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 
-const Confirm = () => {
+enum ActionType {
+  SET_LOADING = 'SET_LOADING',
+  SET_PAYJOIN_ENABLED = 'SET_PAYJOIN_ENABLED',
+  SET_BUTTON_DISABLED = 'SET_BUTTON_DISABLED',
+}
+
+type Action =
+  | { type: ActionType.SET_LOADING; payload: boolean }
+  | { type: ActionType.SET_PAYJOIN_ENABLED; payload: boolean }
+  | { type: ActionType.SET_BUTTON_DISABLED; payload: boolean };
+
+interface State {
+  isLoading: boolean;
+  isPayjoinEnabled: boolean;
+  isButtonDisabled: boolean;
+}
+
+const initialState: State = {
+  isLoading: false,
+  isPayjoinEnabled: false,
+  isButtonDisabled: false,
+};
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case ActionType.SET_LOADING:
+      return { ...state, isLoading: action.payload };
+    case ActionType.SET_PAYJOIN_ENABLED:
+      return { ...state, isPayjoinEnabled: action.payload };
+    case ActionType.SET_BUTTON_DISABLED:
+      return { ...state, isButtonDisabled: action.payload };
+    default:
+      return state;
+  }
+};
+
+type ConfirmRouteProp = RouteProp<SendDetailsStackParamList, 'Confirm'>;
+type ConfirmNavigationProp = NativeStackNavigationProp<SendDetailsStackParamList, 'Confirm'>;
+
+const Confirm: React.FC = () => {
   const { wallets, fetchAndSaveWalletTransactions, isElectrumDisabled } = useContext(BlueStorageContext);
   const { isBiometricUseCapableAndEnabled, unlockWithBiometrics } = useBiometrics();
-  const { params } = useRoute();
-  const { recipients = [], walletID, fee, memo, tx, satoshiPerByte, psbt } = params;
-  const [isLoading, setIsLoading] = useState(false);
-  const [isPayjoinEnabled, setIsPayjoinEnabled] = useState(false);
-  const wallet = wallets.find(w => w.getID() === walletID);
-  const payjoinUrl = wallet.allowPayJoin() ? params.payjoinUrl : false;
+  const navigation = useExtendedNavigation<ConfirmNavigationProp>();
+  const route = useRoute<ConfirmRouteProp>(); // Get the route and its params
+  const { recipients, walletID, fee, memo, tx, satoshiPerByte, psbt, payjoinUrl } = route.params; // Destructure params
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const { navigate, setOptions, goBack } = navigation;
+  const wallet = wallets.find((w: TWallet) => w.getID() === walletID) as TWallet;
   const feeSatoshi = new BigNumber(fee).multipliedBy(100000000).toNumber();
-  const { navigate, setOptions } = useNavigation();
   const { colors } = useTheme();
+
+  useEffect(() => {
+    if (!wallet) {
+      goBack();
+    }
+  }, [wallet, goBack]);
+
   const stylesHook = StyleSheet.create({
     transactionDetailsTitle: {
       color: colors.foregroundColor,
@@ -61,16 +110,8 @@ const Confirm = () => {
     },
   });
 
-  useEffect(() => {
-    console.log('send/confirm - useEffect');
-    console.log('address = ', recipients);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    setOptions({
-      // eslint-disable-next-line react/no-unstable-nested-components
-      headerRight: () => (
+  const HeaderRightButton = useMemo(
+    () => (
       <TouchableOpacity
         accessibilityRole="button"
         testID="TransactionDetailsButton"
@@ -81,7 +122,6 @@ const Confirm = () => {
               return;
             }
           }
-
           navigate('CreateTransaction', {
             fee,
             recipients,
@@ -96,33 +136,57 @@ const Confirm = () => {
         <Text style={[styles.txText, stylesHook.valueUnit]}>{loc.send.create_details}</Text>
       </TouchableOpacity>
     ),
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [colors, fee, feeSatoshi, memo, recipients, satoshiPerByte, tx, wallet]);
+    [
+      stylesHook.txDetails,
+      stylesHook.valueUnit,
+      isBiometricUseCapableAndEnabled,
+      navigate,
+      fee,
+      recipients,
+      memo,
+      tx,
+      satoshiPerByte,
+      wallet,
+      feeSatoshi,
+      unlockWithBiometrics,
+    ],
+  );
 
-  /**
-   * we need to look into `recipients`, find destination address and return its outputScript
-   * (needed for payjoin)
-   *
-   * @return {string}
-   */
-  const getPaymentScript = () => {
-    return bitcoin.address.toOutputScript(recipients[0].address);
+  useEffect(() => {
+    console.log('send/confirm - useEffect');
+    console.log('address = ', recipients);
+  }, [recipients]);
+
+  useEffect(() => {
+    setOptions({
+      headerRight: () => HeaderRightButton,
+    });
+  }, [HeaderRightButton, colors, fee, feeSatoshi, memo, recipients, satoshiPerByte, setOptions, tx, wallet]);
+
+  const getPaymentScript = (): Buffer | undefined => {
+    if (!(recipients.length > 0) || !recipients[0].address) {
+      return undefined;
+    }
+    return bitcoin.address.toOutputScript(recipients[0].address, bitcoin.networks.bitcoin);
   };
 
   const send = async () => {
-    setIsLoading(true);
+    dispatch({ type: ActionType.SET_BUTTON_DISABLED, payload: true });
+    dispatch({ type: ActionType.SET_LOADING, payload: true });
     try {
       const txids2watch = [];
-      if (!isPayjoinEnabled) {
+      if (!state.isPayjoinEnabled) {
         await broadcast(tx);
       } else {
-        const payJoinWallet = new PayjoinTransaction(psbt, txHex => broadcast(txHex), wallet);
+        const payJoinWallet = new PayjoinTransaction(psbt, (txHex: string) => broadcast(txHex), wallet);
         const paymentScript = getPaymentScript();
+        if (!paymentScript) {
+          throw new Error('Invalid payment script');
+        }
         const payjoinClient = new PayjoinClient({
           paymentScript,
-          wallet: payJoinWallet,
-          payjoinUrl,
+          wallet: payJoinWallet.getPayjoinPsbt(),
+          payjoinUrl: payjoinUrl as string,
         });
         await payjoinClient.run();
         const payjoinPsbt = payJoinWallet.getPayjoinPsbt();
@@ -134,31 +198,37 @@ const Confirm = () => {
 
       const txid = bitcoin.Transaction.fromHex(tx).getId();
       txids2watch.push(txid);
+      // @ts-ignore: Notifications has to be TSed
       Notifications.majorTomToGroundControl([], [], txids2watch);
       let amount = 0;
       for (const recipient of recipients) {
+        if (recipient.value) {
           amount += recipient.value;
         }
+      }
 
-      amount = formatBalanceWithoutSuffix(amount, BitcoinUnit.BTC, false);
+      amount = Number(formatBalanceWithoutSuffix(amount, BitcoinUnit.BTC, false));
       triggerHapticFeedback(HapticFeedbackTypes.NotificationSuccess);
       navigate('Success', {
         fee: Number(fee),
         amount,
       });
 
-      setIsLoading(false);
+      dispatch({ type: ActionType.SET_LOADING, payload: false });
 
       await new Promise(resolve => setTimeout(resolve, 3000)); // sleep to make sure network propagates
       fetchAndSaveWalletTransactions(walletID);
-    } catch (error) {
+    } catch (error: any) {
       triggerHapticFeedback(HapticFeedbackTypes.NotificationError);
-      setIsLoading(false);
+      dispatch({ type: ActionType.SET_LOADING, payload: false });
+      dispatch({ type: ActionType.SET_BUTTON_DISABLED, payload: false });
       presentAlert({ message: error.message });
     }
   };
 
-  const broadcast = async transaction => {
+  const debouncedSend = debounce(send, 3000);
+
+  const broadcast = async (transaction: string) => {
     await BlueElectrum.ping();
     await BlueElectrum.waitTillConnected();
 
@@ -176,16 +246,18 @@ const Confirm = () => {
     return result;
   };
 
-  const _renderItem = ({ index, item }) => {
+  const renderItem = ({ index, item }: { index: number; item: CreateTransactionTarget }) => {
     return (
       <>
         <View style={styles.valueWrap}>
           <Text testID="TransactionValue" style={[styles.valueValue, stylesHook.valueValue]}>
-            {satoshiToBTC(item.value)}
+            {item.value && satoshiToBTC(item.value)}
           </Text>
           <Text style={[styles.valueUnit, stylesHook.valueValue]}>{' ' + loc.units[BitcoinUnit.BTC]}</Text>
         </View>
-        <Text style={[styles.transactionAmountFiat, stylesHook.transactionAmountFiat]}>{satoshiToLocalCurrency(item.value)}</Text>
+        <Text style={[styles.transactionAmountFiat, stylesHook.transactionAmountFiat]}>
+          {item.value && satoshiToLocalCurrency(item.value)}
+        </Text>
         <BlueCard>
           <Text style={[styles.transactionDetailsTitle, stylesHook.transactionDetailsTitle]}>{loc.send.create_to}</Text>
           <Text testID="TransactionAddress" style={[styles.transactionDetailsSubtitle, stylesHook.transactionDetailsSubtitle]}>
@@ -198,10 +270,6 @@ const Confirm = () => {
       </>
     );
   };
-  _renderItem.propTypes = {
-    index: PropTypes.number.isRequired,
-    item: PropTypes.object.isRequired,
-  };
 
   const renderSeparator = () => {
     return <View style={styles.separator} />;
@@ -210,11 +278,11 @@ const Confirm = () => {
   return (
     <SafeArea style={[styles.root, stylesHook.root]}>
       <View style={styles.cardTop}>
-        <FlatList
+        <FlatList<CreateTransactionTarget>
           scrollEnabled={recipients.length > 1}
           extraData={recipients}
           data={recipients}
-          renderItem={_renderItem}
+          renderItem={renderItem}
           keyExtractor={(_item, index) => `${index}`}
           ItemSeparatorComponent={renderSeparator}
         />
@@ -223,7 +291,11 @@ const Confirm = () => {
             <BlueCard>
               <View style={[styles.payjoinWrapper, stylesHook.payjoinWrapper]}>
                 <Text style={styles.payjoinText}>Payjoin</Text>
-                <Switch testID="PayjoinSwitch" value={isPayjoinEnabled} onValueChange={setIsPayjoinEnabled} />
+                <Switch
+                  testID="PayjoinSwitch"
+                  value={state.isPayjoinEnabled}
+                  onValueChange={value => dispatch({ type: ActionType.SET_PAYJOIN_ENABLED, payload: value })}
+                />
               </View>
             </BlueCard>
           </View>
@@ -234,7 +306,11 @@ const Confirm = () => {
           <Text style={styles.cardText} testID="TransactionFee">
             {loc.send.create_fee}: {formatBalance(feeSatoshi, BitcoinUnit.BTC)} ({satoshiToLocalCurrency(feeSatoshi)})
           </Text>
-          {isLoading ? <ActivityIndicator /> : <Button disabled={isElectrumDisabled} onPress={send} title={loc.send.confirm_sendNow} />}
+          {state.isLoading ? (
+            <ActivityIndicator />
+          ) : (
+            <Button disabled={isElectrumDisabled || state.isButtonDisabled} onPress={debouncedSend} title={loc.send.confirm_sendNow} />
+          )}
         </BlueCard>
       </View>
     </SafeArea>