chore: add inputs for fee, recipient and amount

Author: cryptotavares

src/components/transactions/swapComparison.js

@@ -4,9 +4,9 @@ import globalContext from '../..';
 // Constants
 const UNIVERSAL_ROUTER = '0x66a9893cc07d91d95644aedd05d03f95e1dba8af';
 const USDC_ADDRESS = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';
-const FEE_RECIPIENT = '0x58c51ee8998e8ef06362df26a0d966bbd0cf5113';
-const ETH_AMOUNT = '0x10a741a462780'; // 0.0003 ETH in hex
-const FEE_BIPS = 5000; // 50% in basis points
+const DEFAULT_FEE_RECIPIENT = '0x58c51ee8998e8ef06362df26a0d966bbd0cf5113';
+const DEFAULT_ETH_AMOUNT = '0.0003'; // 0.0003 ETH
+const DEFAULT_FEE_PERCENTAGE = 50; // 50%
 const EMPTY_BYTES = '0x';
 
 const Actions = {
@@ -42,6 +42,83 @@ const V4_BASE_ACTIONS_ABI_DEFINITION = {
   ],
 };
 
+// Helper functions for input validation and parsing
+function isValidAddress(address) {
+  return ethers.utils.isAddress(address);
+}
+
+function parseEthAmount(input) {
+  const value = input.trim();
+  if (!value) {
+    return null;
+  }
+
+  try {
+    const parsed = parseFloat(value);
+    if (isNaN(parsed) || parsed < 0) {
+      return null;
+    }
+    // Convert ETH to wei and then to hex
+    return ethers.utils.parseEther(value.toString()).toHexString();
+  } catch {
+    return null;
+  }
+}
+
+function parseFeePercentage(input) {
+  const value = input.trim();
+  if (!value) {
+    return null;
+  }
+
+  try {
+    const parsed = parseFloat(value);
+    if (isNaN(parsed) || parsed < 0 || parsed > 100) {
+      return null;
+    }
+    // Convert percentage to basis points (1% = 100 basis points)
+    return Math.round(parsed * 100);
+  } catch {
+    return null;
+  }
+}
+
+function getConfigValues() {
+  const feeRecipientElement = document.getElementById('feeRecipientInput');
+  const ethAmountElement = document.getElementById('ethAmountInput');
+  const feePercentageElement = document.getElementById('feePercentageInput');
+
+  const feeRecipientInput = feeRecipientElement
+    ? feeRecipientElement.value.trim()
+    : '';
+  const ethAmountInput = ethAmountElement ? ethAmountElement.value.trim() : '';
+  const feePercentageInput = feePercentageElement
+    ? feePercentageElement.value.trim()
+    : '';
+
+  // Use defaults if inputs are empty or invalid
+  const feeRecipient =
+    feeRecipientInput && isValidAddress(feeRecipientInput)
+      ? feeRecipientInput
+      : DEFAULT_FEE_RECIPIENT;
+
+  const ethAmountHex =
+    parseEthAmount(ethAmountInput) ||
+    ethers.utils.parseEther(DEFAULT_ETH_AMOUNT).toHexString();
+
+  const feeBips =
+    parseFeePercentage(feePercentageInput) || DEFAULT_FEE_PERCENTAGE * 100;
+
+  return {
+    feeRecipient,
+    ethAmountHex,
+    feeBips,
+    ethAmountDisplay: ethAmountInput || DEFAULT_ETH_AMOUNT,
+    feePercentageDisplay:
+      feePercentageInput || DEFAULT_FEE_PERCENTAGE.toString(),
+  };
+}
+
 function createAction(action, parameters) {
   const encodedInput = ethers.utils.defaultAbiCoder.encode(
     V4_BASE_ACTIONS_ABI_DEFINITION[action].map((v) => v.type),
@@ -72,22 +149,87 @@ export function swapComparisonComponent(parentContainer) {
             </h4>
 
             <p class="info-text alert alert-warning">
-                ⚠️ This swap includes a 50% fee deduction for testing purposes
+                ⚠️ This swap includes a high fee for testing purposes
             </p>
 
             <div class="alert alert-secondary">
-                <strong>Swap Details:</strong><br/>
-                • From: 0.0003 ETH<br/>
+                <strong>Current Swap Details:</strong><br/>
+                <span id="swapDetailsDisplay">
+                • From: <span id="displayEthAmount">${DEFAULT_ETH_AMOUNT}</span> ETH<br/>
                 • To: USDC<br/>
-                • Fee: 50% of output
+                • Fee: <span id="displayFeePercentage">${DEFAULT_FEE_PERCENTAGE}</span>% of output
+                </span>
+            </div>
+
+            <!-- Configuration Section -->
+            <div class="card mb-3" style="background-color: #f8f9fa;">
+                <div class="card-body">
+                    <h6 class="card-subtitle mb-3 text-muted">
+                        <strong>Configuration (Optional)</strong>
+                    </h6>
+
+                    <div class="form-group mb-3">
+                        <label for="ethAmountInput" style="font-size: 0.9em;">
+                            <strong>ETH Amount</strong>
+                        </label>
+                        <input
+                            type="number"
+                            class="form-control"
+                            id="ethAmountInput"
+                            placeholder="${DEFAULT_ETH_AMOUNT}"
+                            step="0.0001"
+                            min="0"
+                            style="font-size: 0.9em;"
+                        />
+                        <small class="form-text text-muted">Leave empty for default (${DEFAULT_ETH_AMOUNT} ETH)</small>
+                    </div>
+
+                    <div class="form-group mb-3">
+                        <label for="feePercentageInput" style="font-size: 0.9em;">
+                            <strong>Fee Percentage</strong>
+                        </label>
+                        <input
+                            type="number"
+                            class="form-control"
+                            id="feePercentageInput"
+                            placeholder="${DEFAULT_FEE_PERCENTAGE}"
+                            step="1"
+                            min="0"
+                            max="100"
+                            style="font-size: 0.9em;"
+                        />
+                        <small class="form-text text-muted">Leave empty for default (${DEFAULT_FEE_PERCENTAGE}%)</small>
+                    </div>
+
+                    <div class="form-group mb-3">
+                        <label for="feeRecipientInput" style="font-size: 0.9em;">
+                            <strong>Fee Recipient Address</strong>
+                        </label>
+                        <input
+                            type="text"
+                            class="form-control"
+                            id="feeRecipientInput"
+                            placeholder="${DEFAULT_FEE_RECIPIENT}"
+                            style="font-size: 0.85em; font-family: monospace;"
+                        />
+                        <small class="form-text text-muted">Leave empty for default address</small>
+                    </div>
+
+                    <button
+                        class="btn btn-sm btn-secondary btn-block"
+                        id="resetConfigButton"
+                    >
+                        Reset to Defaults
+                    </button>
+                </div>
             </div>
 
             <button
                 class="btn btn-primary btn-lg btn-block mb-3"
                 id="swapComparisonSwapButton"
                 disabled
             >
-                Swap ETH to USDC (50% Fee)
+                Swap ETH to USDC
             </button>
 
             <p class="info-text alert alert-secondary">
@@ -105,6 +247,31 @@ export function swapComparisonComponent(parentContainer) {
   const swapButton = document.getElementById('swapComparisonSwapButton');
   const statusDisplay = document.getElementById('swapStatus');
   const txHashDisplay = document.getElementById('swapTxHash');
+  const resetButton = document.getElementById('resetConfigButton');
+  const ethAmountInput = document.getElementById('ethAmountInput');
+  const feePercentageInput = document.getElementById('feePercentageInput');
+  const feeRecipientInput = document.getElementById('feeRecipientInput');
+  const displayEthAmount = document.getElementById('displayEthAmount');
+  const displayFeePercentage = document.getElementById('displayFeePercentage');
+
+  // Function to update the swap details display
+  function updateSwapDetailsDisplay() {
+    const config = getConfigValues();
+    displayEthAmount.textContent = config.ethAmountDisplay;
+    displayFeePercentage.textContent = config.feePercentageDisplay;
+  }
+
+  // Add event listeners for input changes to update display
+  ethAmountInput.addEventListener('input', updateSwapDetailsDisplay);
+  feePercentageInput.addEventListener('input', updateSwapDetailsDisplay);
+
+  // Reset button handler
+  resetButton.addEventListener('click', function () {
+    ethAmountInput.value = '';
+    feePercentageInput.value = '';
+    feeRecipientInput.value = '';
+    updateSwapDetailsDisplay();
+  });
 
   document.addEventListener('globalConnectionChange', function (e) {
     if (e.detail.connected) {
@@ -122,25 +289,38 @@ export function swapComparisonComponent(parentContainer) {
   swapButton.onclick = async () => {
     try {
       statusDisplay.innerHTML = 'Building transaction...';
+
+      // Get configuration values from inputs or use defaults
+      const config = getConfigValues();
+
       console.log('=== Swap Comparison Transaction ===');
       console.log('Router:', UNIVERSAL_ROUTER);
-      console.log('ETH Amount:', ETH_AMOUNT, '(0.0003 ETH)');
-      console.log('Fee Recipient:', FEE_RECIPIENT);
-      console.log('Fee %:', FEE_BIPS / 100, '%');
+      console.log(
+        'ETH Amount:',
+        config.ethAmountHex,
+        `(${config.ethAmountDisplay} ETH)`,
+      );
+      console.log('Fee Recipient:', config.feeRecipient);
+      console.log('Fee %:', config.feeBips / 100, '%');
 
       // Use working example as template and modify only necessary values
       const deadline = Math.floor(Date.now() / 1000) + 1200; // 20 minutes from now
 
       // Build calldata using template from working example
-      const data = buildCalldata(deadline, FEE_RECIPIENT, FEE_BIPS);
+      const data = buildCalldata(
+        deadline,
+        config.feeRecipient,
+        config.feeBips,
+        config.ethAmountHex,
+      );
 
       statusDisplay.innerHTML = 'Sending transaction...';
 
       // Send the transaction
       const txParams = {
         from: globalContext.accounts[0],
         to: UNIVERSAL_ROUTER,
-        value: ETH_AMOUNT,
+        value: config.ethAmountHex,
         data,
       };
 
@@ -166,16 +346,20 @@ export function swapComparisonComponent(parentContainer) {
 
 /**
  * Build calldata using the working example as a template
- * Only modifies: deadline, fee recipient, fee bips, and user address
+ * Only modifies: deadline, fee recipient, fee bips, eth amount, and user address
  */
-function buildCalldata(deadline, feeRecipient, feeBips) {
+function buildCalldata(deadline, feeRecipient, feeBips, ethAmount) {
   // Working example from the original transaction
   // We'll use ethers to properly encode with our values
   const commands = '0x10'; // V4_SWAP
 
   // V4_SWAP input - extracted from working example
   // This is the complex nested structure that we keep as-is
-  const v4SwapInput = buildV4SwapInputFromExample(feeRecipient, feeBips);
+  const v4SwapInput = buildV4SwapInputFromExample(
+    feeRecipient,
+    feeBips,
+    ethAmount,
+  );
 
   // Encode the execute function call
   const inputs = [v4SwapInput]; //, payPortionInput, sweepInput];
@@ -197,7 +381,7 @@ function buildCalldata(deadline, feeRecipient, feeBips) {
  * Build V4_SWAP input from working example structure
  * This uses the exact structure from a known working transaction
  */
-function buildV4SwapInputFromExample(feeRecipient, feeBips) {
+function buildV4SwapInputFromExample(feeRecipient, feeBips, ethAmount) {
   // From working example: actions = 0x070b0e
   let v4Actions = EMPTY_BYTES;
   const v4Params = [];
@@ -219,7 +403,7 @@ function buildV4SwapInputFromExample(feeRecipient, feeBips) {
     {
       poolKey,
       zeroForOne: true, // The direction of swap is ETH to USDC. Change it to 'false' for the reverse direction
-      amountIn: ETH_AMOUNT,
+      amountIn: ethAmount,
       amountOutMinimum, // Change according to the slippage desired
       hookData: '0x00',
     },
@@ -229,7 +413,7 @@ function buildV4SwapInputFromExample(feeRecipient, feeBips) {
 
   const settleAll = addAction(Actions.SETTLE_ALL, [
     poolKey.currency0,
-    ETH_AMOUNT,
+    ethAmount,
   ]);
   v4Actions = v4Actions.concat(settleAll.newAction);
   v4Params.push(settleAll.newParam);