1inch-quick-calc.js

// ==UserScript==
// @name         Add Quick Calculations to 1inch
// @namespace    http://tampermonkey.net/
// @version      0.5
// @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.githubusercontent.com/Korkey128k/bce740d1c235cdaa14d7268eb79ce423/raw
// @updateURL    https://gist.githubusercontent.com/Korkey128k/bce740d1c235cdaa14d7268eb79ce423/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()
                document.querySelector('[data-id="swap-box.src-token-input"]').addEventListener('keyup', deselectButton)
            }
        }
    }, 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;
          }
          
          .field, .field:focus {
            border-radius: 16px 16px 0 0 !important;
          }

          #quick-calc-container {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: stretch;
            width: 100%;

            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 {
            flex: 1 1 auto;
            padding: 0.5em 0;
            color: white;
            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;
          }
        `

        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();
        
        document.querySelectorAll('#quick-calc-container span').forEach((button) => { button.classList.remove('active') });
        event.target.classList.add('active')

        let thisPercent = parseFloat(event.target.getAttribute('data-percent'))
        let percentAmt = calculatePercent(thisPercent)

        fillIn(percentAmt)
    }

    function deselectButton(event) {
        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) {

        // 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.setAttribute('data-calc-set', amt)
        tokenInput.dispatchEvent(inputEvent)
    }
})();