Implement RBF and CPFP with new fees package and add pending transactions view in @caravan/coordinator

apps/coordinator/package.json

@@ -99,6 +99,7 @@
     "@caravan/descriptors": "^0.1.1",
     "@caravan/eslint-config": "*",
     "@caravan/psbt": "*",
+    "@caravan/fees": "*",
     "@caravan/typescript-config": "*",
     "@caravan/wallets": "*",
     "@emotion/react": "^11.10.6",

apps/coordinator/src/actions/transactionActions.js

@@ -15,6 +15,7 @@ export const SET_REQUIRED_SIGNERS = "SET_REQUIRED_SIGNERS";
 export const SET_TOTAL_SIGNERS = "SET_TOTAL_SIGNERS";
 
 export const SET_INPUTS = "SET_INPUTS";
+export const SET_RBF = "SET_RBF";
 
 export const ADD_OUTPUT = "ADD_OUTPUT";
 export const SET_OUTPUT_ADDRESS = "SET_OUTPUT_ADDRESS";
@@ -114,6 +115,11 @@ export function setChangeAddressAction(value) {
   };
 }
 
+export const setRBF = (enabled) => ({
+  type: SET_RBF,
+  value: enabled,
+});
+
 export function setChangeOutput({ value, address }) {
   return (dispatch, getState) => {
     const {

apps/coordinator/src/actions/walletActions.js

@@ -33,6 +33,7 @@ export const WALLET_MODES = {
   VIEW: 0,
   DEPOSIT: 1,
   SPEND: 2,
+  PENDING: 3,
 };
 
 export function updateDepositSliceAction(value) {

apps/coordinator/src/components/ScriptExplorer/OutputsForm.jsx

@@ -14,7 +14,10 @@ import {
   InputAdornment,
   Typography,
   FormHelperText,
+  Switch,
+  FormControlLabel,
 } from "@mui/material";
+import InfoIcon from "@mui/icons-material/Info";
 import { Speed } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
 import {
@@ -24,6 +27,7 @@ import {
   setFee as setFeeAction,
   finalizeOutputs as finalizeOutputsAction,
   resetOutputs as resetOutputsAction,
+  setRBF as setRBFAction,
 } from "../../actions/transactionActions";
 import { updateBlockchainClient } from "../../actions/clientActions";
 import { MIN_SATS_PER_BYTE_FEE } from "../Wallet/constants";
@@ -231,6 +235,11 @@ class OutputsForm extends React.Component {
       setOutputAmount(1, outputAmount);
   }
 
+  handleRBFToggle = () => {
+    const { setRBF, rbfEnabled } = this.props;
+    setRBF(!rbfEnabled);
+  };
+
   render() {
     const {
       feeRate,
@@ -242,6 +251,7 @@ class OutputsForm extends React.Component {
       inputs,
       isWallet,
       autoSpend,
+      rbfEnabled,
     } = this.props;
     const { feeRateFetchError } = this.state;
     const feeDisplay = inputs && inputs.length > 0 ? fee : "0.0000";
@@ -281,7 +291,7 @@ class OutputsForm extends React.Component {
               </Button>
             </Grid>
           </Grid>
-          <Grid item container spacing={gridSpacing}>
+          <Grid item container spacing={gridSpacing} alignItems="flex-end">
             <Grid item xs={3}>
               <Box mt={feeMt}>
                 <Typography
@@ -327,9 +337,6 @@ class OutputsForm extends React.Component {
               </Typography>
             </Grid>
 
-            <Grid item xs={4}>
-              <Box mt={feeMt}>&nbsp;</Box>
-            </Grid>
             {!isWallet || (isWallet && !autoSpend) ? (
               <Grid item xs={3}>
                 <Box mt={feeMt}>
@@ -357,10 +364,37 @@ class OutputsForm extends React.Component {
                 </Box>
               </Grid>
             ) : (
-              ""
+              <Grid item xs={3} />
             )}
 
-            <Grid item xs={2} />
+            <Grid item xs={1} />
+            <Grid item xs={3}>
+              <Box
+                mt={feeMt}
+                display="flex"
+                flexDirection="column"
+                alignItems="flex-end"
+              >
+                <Tooltip title="Replace-By-Fee allows you to increase the fee later if needed">
+                  <IconButton size="small">
+                    <InfoIcon />
+                  </IconButton>
+                </Tooltip>
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={rbfEnabled}
+                      onChange={this.handleRBFToggle}
+                      name="rbfToggle"
+                      color="primary"
+                      disabled={finalizedOutputs}
+                    />
+                  }
+                  label="Enable RBF"
+                  labelPlacement="start"
+                />
+              </Box>
+            </Grid>
           </Grid>
 
           <Grid item container spacing={gridSpacing}>
@@ -488,6 +522,8 @@ OutputsForm.propTypes = {
   signatureImporters: PropTypes.shape({}).isRequired,
   updatesComplete: PropTypes.bool,
   getBlockchainClient: PropTypes.func.isRequired,
+  rbfEnabled: PropTypes.bool.isRequired,
+  setRBF: PropTypes.func.isRequired,
 };
 
 OutputsForm.defaultProps = {
@@ -504,6 +540,7 @@ function mapStateToProps(state) {
     ...state.client,
     signatureImporters: state.spend.signatureImporters,
     change: state.wallet.change,
+    rbfEnabled: state.spend.transaction.rbfEnabled,
   };
 }
 
@@ -515,6 +552,7 @@ const mapDispatchToProps = {
   finalizeOutputs: finalizeOutputsAction,
   resetOutputs: resetOutputsAction,
   getBlockchainClient: updateBlockchainClient,
+  setRBF: setRBFAction,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(OutputsForm);

apps/coordinator/src/components/Wallet/WalletControl.jsx

@@ -16,6 +16,7 @@ import { setRequiredSigners as setRequiredSignersAction } from "../../actions/tr
 import { MAX_FETCH_UTXOS_ERRORS, MAX_TRAILING_EMPTY_NODES } from "./constants";
 import WalletDeposit from "./WalletDeposit";
 import WalletSpend from "./WalletSpend";
+import WalletPendingTransactions from "./WalletPendingTransactions";
 import { SlicesTableContainer } from "../Slices";
 
 class WalletControl extends React.Component {
@@ -41,6 +42,7 @@ class WalletControl extends React.Component {
             <Tab label="Addresses" value={WALLET_MODES.VIEW} key={0} />,
             <Tab label="Receive" value={WALLET_MODES.DEPOSIT} key={1} />,
             <Tab label="Send" value={WALLET_MODES.SPEND} key={2} />,
+            <Tab label="Pending" value={WALLET_MODES.PENDING} key={3} />,
           ]}
         </Tabs>
         <Box mt={2}>{this.renderModeComponent()}</Box>
@@ -55,6 +57,8 @@ class WalletControl extends React.Component {
       if (walletMode === WALLET_MODES.SPEND)
         return <WalletSpend addNode={addNode} updateNode={updateNode} />;
       if (walletMode === WALLET_MODES.VIEW) return <SlicesTableContainer />;
+      if (walletMode === WALLET_MODES.PENDING)
+        return <WalletPendingTransactions />;
     }
     const progress = this.progress();
     return [