Merge pull request bitpay#395 from gabrielbazan7/ref/txpdetails

[REF] listen to wallet changes txp details

Author: JohnathanWhite

src/navigation/wallet/WalletStack.tsx

@@ -121,7 +121,11 @@ export type WalletStackParamList = {
     transaction: any;
     onMemoChange: () => void;
   };
-  TransactionProposalDetails: {wallet: WalletModel; transaction: any; key: Key};
+  TransactionProposalDetails: {
+    walletId: string;
+    transactionId: string;
+    keyId: string;
+  };
   TransactionProposalNotifications: {walletId?: string; keyId?: string};
   GlobalSelect: GlobalSelectParamList;
   KeyGlobalSelect: KeyGlobalSelectParamList;

src/navigation/wallet/screens/TransactionProposalDetails.tsx

@@ -68,6 +68,8 @@ import {BWCErrorMessage} from '../../../constants/BWCError';
 import {BottomNotificationConfig} from '../../../components/modal/bottom-notification/BottomNotification';
 import {startUpdateWalletStatus} from '../../../store/wallet/effects/status/status';
 import {useTranslation} from 'react-i18next';
+import {findWalletById} from '../../../store/wallet/utils/wallet';
+import {Key, Wallet} from '../../../store/wallet/wallet.models';
 
 const TxsDetailsContainer = styled.SafeAreaView`
   flex: 1;
@@ -189,19 +191,22 @@ const TimelineList = ({actions}: {actions: TxActions[]}) => {
 
 const TransactionProposalDetails = () => {
   const {t} = useTranslation();
+  const dispatch = useAppDispatch();
+  const navigation = useNavigation();
   const {
-    params: {transaction, wallet, key},
+    params: {transactionId, walletId, keyId},
   } = useRoute<RouteProp<WalletStackParamList, 'TransactionProposalDetails'>>();
   const defaultAltCurrency = useAppSelector(({APP}) => APP.defaultAltCurrency);
-  const dispatch = useAppDispatch();
-  const navigation = useNavigation();
+  const key = useAppSelector(({WALLET}) => WALLET.keys[keyId]) as Key;
+  const wallet = findWalletById(key.wallets, walletId) as Wallet;
+  const transaction = wallet.pendingTxps.find(txp => txp.id === transactionId);
   const [txs, setTxs] = useState<any>();
   const [isLoading, setIsLoading] = useState(true);
-  const title = getDetailsTitle(transaction, wallet);
   const [showPaymentSentModal, setShowPaymentSentModal] = useState(false);
   const [resetSwipeButton, setResetSwipeButton] = useState(false);
   const [lastSigner, setLastSigner] = useState(false);
 
+  const title = getDetailsTitle(transaction, wallet);
   let {
     currencyAbbreviation,
     credentials: {network},
@@ -218,6 +223,10 @@ const TransactionProposalDetails = () => {
 
   const init = async () => {
     try {
+      if (!transaction) {
+        navigation.goBack();
+        return;
+      }
       const _transaction = await dispatch(
         buildTransactionDetails({
           transaction,
@@ -241,7 +250,7 @@ const TransactionProposalDetails = () => {
 
   useEffect(() => {
     init();
-  }, []);
+  }, [transaction, wallet]);
 
   const getIcon = () => {
     return SUPPORTED_CURRENCIES.includes(txs.coin) ? (

src/navigation/wallet/screens/TransactionProposalNotifications.tsx

@@ -285,7 +285,11 @@ const TransactionProposalNotifications = () => {
       const key = keys[fullWalletObj.keyId];
       navigation.navigate('Wallet', {
         screen: 'TransactionProposalDetails',
-        params: {wallet: fullWalletObj, transaction, key},
+        params: {
+          walletId: fullWalletObj.id,
+          transactionId: transaction.id,
+          keyId: key.id,
+        },
       });
     },
     [keys, navigation],

src/navigation/wallet/screens/WalletDetails.tsx

@@ -808,7 +808,11 @@ const WalletDetails: React.FC<WalletDetailsScreenProps> = ({route}) => {
     () => (transaction: any) => {
       navigation.navigate('Wallet', {
         screen: 'TransactionProposalDetails',
-        params: {wallet: fullWalletObj, transaction, key},
+        params: {
+          walletId: fullWalletObj.id,
+          transactionId: transaction.id,
+          keyId: key.id,
+        },
       });
     },
     [],

src/store/wallet/effects/transactions/transactions.ts

@@ -780,6 +780,9 @@ export const CanSpeedupTx =
 ///////////////////////////////////////// Transaction Details ////////////////////////////////////////////////
 
 export const getDetailsTitle = (transaction: any, wallet: Wallet) => {
+  if (!transaction) {
+    return;
+  }
   const {action, error} = transaction;
   const {coin} = wallet.credentials;