korkey128k · July 29, 2021 10:25 · Jul 29, 2021 · Jul 27, 2021 · Jul 27, 2021 · Jul 27, 2021
diff --git a/1inch-quick-calc.js b/1inch-quick-calc.js
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Add Quick Calculations to 1inch
 // @namespace    http://tampermonkey.net/
-// @version      0.4
+// @version      0.5
 // @description  Add quick links on 1inch, similar to trading interfaces
 // @author       Korkey128k
 // @match        https://app.1inch.io/
@@ -23,6 +23,7 @@
         if (event.animationName == "nodeInserted") {
             if(document.querySelector('app-token-amount-input') !== null) {
                 maybeAddButtons()
+                document.querySelector('[data-id="swap-box.src-token-input"]').addEventListener('keyup', deselectButton)
             }
         }
     }, false);
@@ -110,8 +111,6 @@
         let percentAmt = calculatePercent(thisPercent)
 
         fillIn(percentAmt)
-
-        document.querySelector('[data-calc-set]').addEventListener('keyup', deselectButton)
     }
 
     function deselectButton(event) {

diff --git a/1inch-quick-calc.js b/1inch-quick-calc.js
@@ -16,7 +16,7 @@
 
     writeStylez()
 
-    var inputEvent = new Event('change', { bubbles: true });
+    var inputEvent = new Event('keyup', { bubbles: true });
     var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
 
     document.addEventListener("animationstart", function(event) {

diff --git a/1inch-quick-calc.js b/1inch-quick-calc.js
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Add Quick Calculations to 1inch
 // @namespace    http://tampermonkey.net/
-// @version      0.3
+// @version      0.4
 // @description  Add quick links on 1inch, similar to trading interfaces
 // @author       Korkey128k
 // @match        https://app.1inch.io/
@@ -115,9 +115,6 @@
     }
 
     function deselectButton(event) {
-        console.log(event.target.value)
-        console.log(parseFloat(event.target.getAttribute('data-calc-set')))
-
         if(parseFloat(event.target.getAttribute('data-calc-set')) != parseFloat(event.target.value)) {
           event.target.removeAttribute('data-calc-set')
           event.target.removeEventListener('keyup', deselectButton)

diff --git a/1inch-quick-calc.js b/1inch-quick-calc.js
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Add Quick Calculations to 1inch
 // @namespace    http://tampermonkey.net/
-// @version      0.2
+// @version      0.3
 // @description  Add quick links on 1inch, similar to trading interfaces
 // @author       Korkey128k
 // @match        https://app.1inch.io/
@@ -16,7 +16,7 @@
 
     writeStylez()
 
-    var inputEvent = new Event('keyup', { bubbles: true });
+    var inputEvent = new Event('change', { bubbles: true });
     var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
 
     document.addEventListener("animationstart", function(event) {
@@ -105,14 +105,24 @@
 
         document.querySelectorAll('#quick-calc-container span').forEach((button) => { button.classList.remove('active') });
         event.target.classList.add('active')
-
-        document.querySelector('[data-id="swap-box.src-token-input"]').addEventListener('keyup', (event) => {
-            document.querySelectorAll('#quick-calc-container span.active').forEach((button) => { button.classList.remove('active') });
-        });
 
         let thisPercent = parseFloat(event.target.getAttribute('data-percent'))
+        let percentAmt = calculatePercent(thisPercent)
+
+        fillIn(percentAmt)
+
+        document.querySelector('[data-calc-set]').addEventListener('keyup', deselectButton)
+    }
+
+    function deselectButton(event) {
+        console.log(event.target.value)
+        console.log(parseFloat(event.target.getAttribute('data-calc-set')))
 
-        fillIn(calculatePercent(thisPercent))
+        if(parseFloat(event.target.getAttribute('data-calc-set')) != parseFloat(event.target.value)) {
+          event.target.removeAttribute('data-calc-set')
+          event.target.removeEventListener('keyup', deselectButton)
+          document.querySelectorAll('#quick-calc-container span.active').forEach((button) => { button.classList.remove('active') });
+        }
     }
 
     function calculatePercent(percent) {
@@ -130,6 +140,7 @@
     function fillIn(amt) {
         let tokenInput = document.querySelector('[data-id="swap-box.src-token-input"]')
         tokenInput.value = amt
+        tokenInput.setAttribute('data-calc-set', amt)
         tokenInput.dispatchEvent(inputEvent)
     }
 })();
diff --git a/1inch-quick-calc.js b/1inch-quick-calc.js
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Add Quick Calculations to 1inch
 // @namespace    http://tampermonkey.net/
-// @version      0.1
+// @version      0.2
 // @description  Add quick links on 1inch, similar to trading interfaces
 // @author       Korkey128k
 // @match        https://app.1inch.io/

diff --git a/1inch-quick-calc.js b/1inch-quick-calc.js
@@ -40,6 +40,10 @@
             animation-duration: 0.001s;
             animation-name: nodeInserted;
           }
+          
+          .field, .field:focus {
+            border-radius: 16px 16px 0 0 !important;
+          }
 
           #quick-calc-container {
             display: flex;
@@ -48,8 +52,10 @@
             align-items: stretch;
             width: 100%;
 
-            background: rgb(33, 36, 41);
-            padding: 0.6em 0 1em;
+            background: rgb(6, 10, 16);
+            padding: 0.6em 0.7em 1em;
+            border-radius: 0 0 16px 16px;
+            font-size: 0.9em;
           }
 
           #quick-calc-container span {
@@ -59,6 +65,15 @@
             text-align: center;
             text-decoration: none;
             cursor: pointer;
+            border-radius: 7px;
+          }
+          
+          #quick-calc-container span:hover {
+            background-color: #3e3e3e;
+          }
+          
+          #quick-calc-container span.active {
+            background-color: #5b5b5b;
           }
         `
 
@@ -87,6 +102,13 @@
     function modifyInput(event) {
         event.preventDefault();
         event.stopPropagation();
+
+        document.querySelectorAll('#quick-calc-container span').forEach((button) => { button.classList.remove('active') });
+        event.target.classList.add('active')
+
+        document.querySelector('[data-id="swap-box.src-token-input"]').addEventListener('keyup', (event) => {
+            document.querySelectorAll('#quick-calc-container span.active').forEach((button) => { button.classList.remove('active') });
+        });
 
         let thisPercent = parseFloat(event.target.getAttribute('data-percent'))
 

diff --git a/1inch-quick-calc.js b/1inch-quick-calc.js
@@ -7,8 +7,8 @@
 // @match        https://app.1inch.io/
 // @icon         https://www.google.com/s2/favicons?domain=1inch.io
 // @grant        none
-// @downloadURL  https://gist.github.com/Korkey128k/3806feb286f89659b88c8d53ff39b2c5/raw
-// @updateURL    https://gist.github.com/Korkey128k/3806feb286f89659b88c8d53ff39b2c5/raw
+// @downloadURL  https://gist.github.com/Korkey128k/bce740d1c235cdaa14d7268eb79ce423/raw
+// @updateURL    https://gist.github.com/Korkey128k/bce740d1c235cdaa14d7268eb79ce423/raw
 // ==/UserScript==
 
 (function() {

diff --git a/1inch-quick-calc.js b/1inch-quick-calc.js
@@ -0,0 +1,113 @@
+// ==UserScript==
+// @name         Add Quick Calculations to 1inch
+// @namespace    http://tampermonkey.net/
+// @version      0.1
+// @description  Add quick links on 1inch, similar to trading interfaces
+// @author       Korkey128k
+// @match        https://app.1inch.io/
+// @icon         https://www.google.com/s2/favicons?domain=1inch.io
+// @grant        none
+// @downloadURL  https://gist.github.com/Korkey128k/3806feb286f89659b88c8d53ff39b2c5/raw
+// @updateURL    https://gist.github.com/Korkey128k/3806feb286f89659b88c8d53ff39b2c5/raw
+// ==/UserScript==
+
+(function() {
+    'use strict';
+
+    writeStylez()
+
+    var inputEvent = new Event('keyup', { bubbles: true });
+    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+
+    document.addEventListener("animationstart", function(event) {
+        if (event.animationName == "nodeInserted") {
+            if(document.querySelector('app-token-amount-input') !== null) {
+                maybeAddButtons()
+            }
+        }
+    }, false);
+
+    function writeStylez() {
+        const stylez = document.createElement('style')
+
+        stylez.innerHTML = `
+          @keyframes nodeInserted {
+            from { opacity: 0.99; }
+            to { opacity: 1; }
+          }
+
+          app-token-amount-input {
+            animation-duration: 0.001s;
+            animation-name: nodeInserted;
+          }
+
+          #quick-calc-container {
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: center;
+            align-items: stretch;
+            width: 100%;
+
+            background: rgb(33, 36, 41);
+            padding: 0.6em 0 1em;
+          }
+
+          #quick-calc-container span {
+            flex: 1 1 auto;
+            padding: 0.5em 0;
+            color: white;
+            text-align: center;
+            text-decoration: none;
+            cursor: pointer;
+          }
+        `
+
+        document.head.appendChild(stylez);
+
+    }
+
+    function maybeAddButtons() {
+        if(document.querySelector('#quick-calc-container') === null) {
+            const buttonContainer = document.createElement('div')
+            buttonContainer.id = 'quick-calc-container'
+
+            for(const percent of [5, 10, 15, 20, 25, 30, 40, 50, 60, 75, 90]) {
+                let button = document.createElement('span')
+                button.setAttribute('data-percent', percent)
+                button.innerText = `${percent}%`
+
+                buttonContainer.appendChild(button)
+            }
+
+            document.querySelector('app-token-amount-input').appendChild(buttonContainer)
+            document.querySelectorAll('#quick-calc-container span').forEach((button) => button.addEventListener('click', modifyInput) )
+        }
+    }
+
+    function modifyInput(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        let thisPercent = parseFloat(event.target.getAttribute('data-percent'))
+
+        fillIn(calculatePercent(thisPercent))
+    }
+
+    function calculatePercent(percent) {
+
+        // Lolz at the selector. Fra gil ey, must be french...
+        let balanceElem = document.querySelector('[data-id="swap-box.balance-set-max"]')
+
+        if(balanceElem.textContent.match(/\d+(\.\d+)?/g) !== null) {
+          let balance = balanceElem.textContent.match(/\d+(\.\d+)?/g).map((match) => { return parseFloat(match) } )[0]
+          return (percent / 100.0) * balance
+        }
+
+    }
+
+    function fillIn(amt) {
+        let tokenInput = document.querySelector('[data-id="swap-box.src-token-input"]')
+        tokenInput.value = amt
+        tokenInput.dispatchEvent(inputEvent)
+    }
+})();