Advising on UTXO Dusting based on feeRate (Frontend)

apps/coordinator/package.json

@@ -98,6 +98,7 @@
     "@caravan/clients": "*",
     "@caravan/descriptors": "^0.1.1",
     "@caravan/eslint-config": "*",
+    "@caravan/health": "*",
     "@caravan/psbt": "*",
     "@caravan/typescript-config": "*",
     "@caravan/wallets": "*",

apps/coordinator/src/components/ScriptExplorer/DustChip.tsx

@@ -0,0 +1,49 @@
+import { useSelector } from "react-redux";
+import { WasteMetrics } from "@caravan/health";
+import { getWalletConfig } from "../../selectors/wallet";
+import { Chip } from "@mui/material";
+import React from "react";
+
+interface DustChipProps {
+  amountSats: number; // Type for amountSats
+  feeRate: number; // Type for feeRate
+}
+
+const DustChip: React.FC<DustChipProps> = ({ amountSats, feeRate }) => {
+  const walletConfig = useSelector(getWalletConfig);
+  const wasteMetrics = new WasteMetrics();
+  const scriptType = walletConfig.addressType;
+  const config = {
+    requiredSignerCount: walletConfig.quorum.requiredSigners,
+    totalSignerCount: walletConfig.quorum.totalSigners,
+  };
+  const { lowerLimit, upperLimit } = wasteMetrics.calculateDustLimits(
+    feeRate,
+    scriptType,
+    config,
+  );
+
+  let chipArgs: {
+    color: "error" | "success" | "warning";
+    label: React.ReactNode;
+  } = {
+    color: "success", // Use valid color values
+    label: "economical",
+  };
+
+  if (amountSats <= lowerLimit) {
+    chipArgs = {
+      color: "error",
+      label: "dust",
+    };
+  } else if (amountSats > lowerLimit && amountSats <= upperLimit) {
+    chipArgs = {
+      color: "warning",
+      label: "warning",
+    };
+  }
+
+  return <Chip {...chipArgs} />;
+};
+
+export default DustChip;

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

@@ -14,6 +14,7 @@ import {
   InputAdornment,
   Typography,
   FormHelperText,
+  Slider,
 } from "@mui/material";
 import { Speed } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
@@ -29,6 +30,9 @@ import { updateBlockchainClient } from "../../actions/clientActions";
 import { MIN_SATS_PER_BYTE_FEE } from "../Wallet/constants";
 import OutputEntry from "./OutputEntry";
 import styles from "./styles.module.scss";
+import InfoIcon from "@mui/icons-material/Info";
+import { WasteMetrics } from "@caravan/health";
+import { getWalletConfig } from "../../selectors/wallet";
 
 class OutputsForm extends React.Component {
   static unitLabel(label, options) {
@@ -56,12 +60,15 @@ class OutputsForm extends React.Component {
     super(props);
     this.state = {
       feeRateFetchError: "",
+      longTermFeeEstimate: 101,
+      wasteAmount: 0,
     };
   }
 
   componentDidMount = () => {
     this.initialOutputState();
     this.scrollToTitle();
+    this.calculateWaste();
   };
 
   scrollToTitle = () => {
@@ -109,7 +116,6 @@ class OutputsForm extends React.Component {
     // only care to add fee if we have inputs
     // which we won't have in auto-spend wallet output form
     if (fee && inputs.length) total = total.plus(fee);
-
     if (updatesComplete) {
       this.outputsTotal = total;
       return total.toFixed(8);
@@ -149,12 +155,13 @@ class OutputsForm extends React.Component {
   handleAddOutput = () => {
     const { addOutput } = this.props;
     addOutput();
+    this.calculateWaste();
   };
 
   handleFeeRateChange = (event) => {
     const { setFeeRate } = this.props;
     let rate = event.target.value;
-
+    this.calculateWaste();
     if (
       rate === "" ||
       Number.isNaN(parseFloat(rate, 10)) ||
@@ -167,6 +174,7 @@ class OutputsForm extends React.Component {
   handleFeeChange = (event) => {
     const { setFee } = this.props;
     setFee(event.target.value);
+    this.calculateWaste();
   };
 
   handleFinalize = () => {
@@ -181,7 +189,7 @@ class OutputsForm extends React.Component {
   };
 
   getFeeEstimate = async () => {
-    const { getBlockchainClient, setFeeRate } = this.props;
+    const { getBlockchainClient, setFeeRate, onFeeEstimate } = this.props;
     const client = await getBlockchainClient();
     let feeEstimate;
     let feeRateFetchError = "";
@@ -196,6 +204,10 @@ class OutputsForm extends React.Component {
           ? feeEstimate.toString()
           : MIN_SATS_PER_BYTE_FEE.toString(),
       );
+      // Call the parent's callback function with the feeEstimate
+      if (onFeeEstimate) {
+        onFeeEstimate(feeEstimate.toString());
+      }
       this.setState({ feeRateFetchError });
     }
   };
@@ -231,6 +243,34 @@ class OutputsForm extends React.Component {
       setOutputAmount(1, outputAmount);
   }
 
+  handleLongTermFeeEstimateChange = (event, newValue) => {
+    this.setState({ longTermFeeEstimate: newValue });
+    this.calculateWaste();
+  };
+
+  calculateWaste = () => {
+    console.log("Called calculate waste");
+    const { feeRate, fee } = this.props;
+    const { longTermFeeEstimate } = this.state;
+    const weight = fee / satoshisToBitcoins(feeRate);
+    const wasteMetrics = new WasteMetrics();
+    const walletConfig = this.props.walletConfig;
+    const scriptType = walletConfig.addressType;
+    const config = {
+      requiredSignerCount: walletConfig.quorum.requiredSigners,
+      totalSignerCount: walletConfig.quorum.totalSigners,
+    };
+    const wasteAmount = wasteMetrics.spendWasteAmount(
+      weight,
+      feeRate,
+      scriptType,
+      config,
+      longTermFeeEstimate,
+    );
+    // console.log(fee, feeRate, weight,walletConfig, wasteAmount);
+    this.setState({ wasteAmount });
+  };
+
   render() {
     const {
       feeRate,
@@ -249,6 +289,7 @@ class OutputsForm extends React.Component {
     const totalMt = 7;
     const actionMt = 7;
     const gridSpacing = isWallet ? 10 : 1;
+    const { longTermFeeEstimate, wasteAmount } = this.state;
     return (
       <>
         <Box ref={this.titleRef}>
@@ -414,6 +455,43 @@ class OutputsForm extends React.Component {
             </Grid>
             <Grid item xs={2} />
           </Grid>
+
+          {wasteAmount ? (
+            <Grid item xs={12}>
+              <h3>
+                Waste Analysis
+                <Tooltip title="Waste analysis helps calculate inefficiencies in the transaction due to fees, UTXO consolidation, etc.">
+                  <IconButton size="small" sx={{ marginLeft: 1 }}>
+                    <InfoIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </h3>
+              <Typography gutterBottom>
+                Spend Waste Amount (SWA): {wasteAmount.toFixed(2)} Sats
+                <Tooltip title="SWA represents the amount of waste in Satoshis spent during the transaction due to inefficiencies. Postive SWA means that it would be efficient to spend this transaction later when the feerate decreases. For Negative SWA, spending now could be the best decision.">
+                  <IconButton size="small" sx={{ marginLeft: 1 }}>
+                    <InfoIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </Typography>
+              <Slider
+                value={longTermFeeEstimate}
+                min={1}
+                max={500}
+                step={1}
+                onChange={this.handleLongTermFeeEstimateChange}
+                aria-labelledby="long-term-fee-estimate-slider"
+              />
+              <Typography id="long-term-fee-estimate-slider" gutterBottom>
+                Long Term Fee Estimate (L): {longTermFeeEstimate} sats/vB
+                <Tooltip title="L refers to the long-term estimated fee rate in Satoshis per vByte for future transactions.">
+                  <IconButton size="small" sx={{ marginLeft: 1 }}>
+                    <InfoIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </Typography>
+            </Grid>
+          ) : null}
         </Box>
 
         {!isWallet && (
@@ -473,6 +551,7 @@ OutputsForm.propTypes = {
   }).isRequired,
   isWallet: PropTypes.bool.isRequired,
   network: PropTypes.string.isRequired,
+  onFeeEstimate: PropTypes.func,
   outputs: PropTypes.arrayOf(
     PropTypes.shape({
       address: PropTypes.string,
@@ -488,6 +567,7 @@ OutputsForm.propTypes = {
   signatureImporters: PropTypes.shape({}).isRequired,
   updatesComplete: PropTypes.bool,
   getBlockchainClient: PropTypes.func.isRequired,
+  walletConfig: PropTypes.object,
 };
 
 OutputsForm.defaultProps = {
@@ -504,6 +584,7 @@ function mapStateToProps(state) {
     ...state.client,
     signatureImporters: state.spend.signatureImporters,
     change: state.wallet.change,
+    walletConfig: getWalletConfig(state),
   };
 }
 

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

@@ -19,6 +19,7 @@ import { OpenInNew } from "@mui/icons-material";
 import BigNumber from "bignumber.js";
 import { externalLink } from "utils/ExternalLink";
 import Copyable from "../Copyable";
+import DustChip from "./DustChip";
 
 // Actions
 import { setInputs as setInputsAction } from "../../actions/transactionActions";
@@ -171,7 +172,7 @@ class UTXOSet extends React.Component {
   };
 
   renderInputs = () => {
-    const { network, showSelection, finalizedOutputs } = this.props;
+    const { network, showSelection, finalizedOutputs, feeRate } = this.props;
     const { localInputs } = this.state;
     return localInputs.map((input, inputIndex) => {
       const confirmedStyle = `${styles.utxoTxid}${
@@ -203,6 +204,9 @@ class UTXOSet extends React.Component {
           <TableCell>
             <Copyable text={satoshisToBitcoins(input.amountSats)} />
           </TableCell>
+          <TableCell>
+            <DustChip amountSats={input.amountSats} feeRate={feeRate} />
+          </TableCell>
           <TableCell>
             {externalLink(
               blockExplorerTransactionURL(input.txid, network),
@@ -247,6 +251,7 @@ class UTXOSet extends React.Component {
               <TableCell>TXID</TableCell>
               <TableCell>Index</TableCell>
               <TableCell>Amount (BTC)</TableCell>
+              <TableCell>Dust Status</TableCell>
               <TableCell>View</TableCell>
             </TableRow>
           </TableHead>
@@ -284,6 +289,7 @@ UTXOSet.propTypes = {
   existingTransactionInputs: PropTypes.arrayOf(PropTypes.shape({})),
   setSpendCheckbox: PropTypes.func,
   autoSpend: PropTypes.bool.isRequired,
+  feeRate: PropTypes.string,
 };
 
 UTXOSet.defaultProps = {

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

@@ -220,7 +220,7 @@ class AddressExpander extends React.Component {
   };
 
   expandContent = () => {
-    const { client, node, setSpendCheckbox } = this.props;
+    const { client, node, setSpendCheckbox, feeRate } = this.props;
     const { utxos, balanceSats, multisig, bip32Path, spend } = node;
     const { expandMode } = this.state;
 
@@ -242,6 +242,7 @@ class AddressExpander extends React.Component {
               selectAll={spend}
               node={node}
               setSpendCheckbox={setSpendCheckbox}
+              feeRate={feeRate}
             />
           </Grid>
         );
@@ -431,6 +432,7 @@ AddressExpander.propTypes = {
   requiredSigners: PropTypes.number.isRequired,
   totalSigners: PropTypes.number.isRequired,
   setSpendCheckbox: PropTypes.func,
+  feeRate: PropTypes.string,
 };
 
 AddressExpander.defaultProps = {

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

@@ -101,11 +101,12 @@ class Node extends React.Component {
   };
 
   renderAddress = () => {
-    const { braidNode } = this.props;
+    const { braidNode, feeRate } = this.props;
     return (
       <AddressExpander
         node={braidNode}
         setSpendCheckbox={this.setSpendCheckbox}
+        feeRate={feeRate}
       />
     );
   };

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

@@ -153,7 +153,7 @@ class NodeSet extends React.Component {
 
   renderNodes = () => {
     const { page, nodesPerPage, select } = this.state;
-    const { addNode, updateNode } = this.props;
+    const { addNode, updateNode, feeRate } = this.props;
     const startingIndex = page * nodesPerPage;
     const nodesRows = [];
     const nodeSet = this.getNodeSet();
@@ -168,6 +168,7 @@ class NodeSet extends React.Component {
           bip32Path={bip32Path}
           addNode={addNode}
           updateNode={updateNode}
+          feeRate={feeRate}
           change={change}
           select={select}
         />
@@ -276,6 +277,7 @@ NodeSet.propTypes = {
   changeNodes: PropTypes.shape({}).isRequired,
   addNode: PropTypes.func.isRequired,
   updateNode: PropTypes.func.isRequired,
+  feeRate: PropTypes.string,
   walletMode: PropTypes.number.isRequired,
 };
 

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

@@ -52,9 +52,14 @@ class WalletSpend extends React.Component {
     this.state = {
       importPSBTDisabled: false,
       importPSBTError: "",
+      feeEstimate: "",
     };
   }
 
+  handleFeeEstimate = (feeEstimate) => {
+    this.setState({ feeEstimate });
+  };
+
   componentDidUpdate = (prevProps) => {
     const { finalizedOutputs } = this.props;
     if (finalizedOutputs && !prevProps.finalizedOutputs) {
@@ -219,9 +224,13 @@ class WalletSpend extends React.Component {
                   </Box>
                 </Grid>
                 <Box component="div" display={autoSpend ? "none" : "block"}>
-                  <NodeSet addNode={addNode} updateNode={updateNode} />
+                  <NodeSet
+                    addNode={addNode}
+                    updateNode={updateNode}
+                    feeRate={feeRate}
+                  />
                 </Box>
-                <OutputsForm />
+                <OutputsForm onFeeEstimate={this.handleFeeEstimate} />
                 <Box mt={2}>
                   <Button
                     onClick={this.handleShowPreview}