Last active
July 29, 2021 10:25
-
-
Save korkey128k/bce740d1c235cdaa14d7268eb79ce423 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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) | |
} | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment