From b3a0661f9d08bb349ca19c3c4156ec1eb18a6704 Mon Sep 17 00:00:00 2001
From: "Dominik Z." <dominykas.zubavicius@iovlabs.org>
Date: Wed, 18 Dec 2024 15:13:17 +0200
Subject: [PATCH] feat: sort blocks to deliver upon saving configuration

---
 .../rest/assets/static/management.js          | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/internal/adapters/entrypoints/rest/assets/static/management.js b/internal/adapters/entrypoints/rest/assets/static/management.js
index d0762057..be0d5c68 100644
--- 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) => {