Merge pull request #594 from rsksmart/feat-GBI-2380-sort-entries

feat: sort confirmations upon saving configuration
rsksmart · Dec 18, 2024 · 7ad71f9 · 7ad71f9
2 parents 0d6558d + b3a0661
commit 7ad71f9
Showing 1 changed file with 37 additions and 2 deletions.
diff --git a/internal/adapters/entrypoints/rest/assets/static/management.js b/internal/adapters/entrypoints/rest/assets/static/management.js
@@ -118,7 +118,12 @@ document.addEventListener('DOMContentLoaded', () => {
         const entriesContainer = document.createElement('div');
         entriesContainer.classList.add('entries-container');
 
-        Object.entries(confirmations).forEach(([amountWei, confirmation], index) => {
+        const sortedEntries = Object.entries(confirmations).sort(([amountWeiA], [amountWeiB]) => {
+            const amountA = new Decimal(weiToEther(amountWeiA));
+            const amountB = new Decimal(weiToEther(amountWeiB));
+            return amountA.minus(amountB).toNumber();
+        });
+        sortedEntries.forEach(([amountWei, confirmation], index) => {
             createConfirmationEntry(entriesContainer, configKey, index, amountWei, confirmation);
         });
 
@@ -367,7 +372,37 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         }
 
-        if (saveSuccess) showSuccessToast();
+        if (saveSuccess) {
+            showSuccessToast();
+            sortConfirmationEntries();
+        }
+    };
+
+    const sortConfirmationEntries = () => {
+        const confirmationConfigs = document.querySelectorAll('.confirmation-config');
+        confirmationConfigs.forEach(container => {
+            const entriesContainer = container.querySelector('.entries-container');
+            const entries = Array.from(entriesContainer.children);
+
+            entries.sort((a, b) => {
+                const amountA = getAmountFromEntry(a);
+                const amountB = getAmountFromEntry(b);
+                return amountA.minus(amountB).toNumber();
+            });
+
+            entriesContainer.innerHTML = '';
+            entries.forEach(entry => entriesContainer.appendChild(entry));
+        });
+    };
+
+    const getAmountFromEntry = (entry) => {
+        const amountInput = entry.querySelector('input[data-field="amount"]');
+        const amountValue = amountInput.value;
+        try {
+            return new Decimal(amountValue);
+        } catch (error) {
+            return new Decimal(0);
+        }
     };
 
     const addCollateral = async (amountId, endpoint, elementId, loadingBarId, buttonId) => {