Tampermonkey userscript to fill the BitMEX order quantity field with percentage buttons

PercentageButtons.js

// ==UserScript==
// @name         BitMEX Percentage Order Quantity Buttons
// @namespace    https://bitmex.com/
// @version      0.1
// @description  Fill the order quantity field with just one click
// @author       I love Ketchup (contact me in the BitMEX trollbox)
// @homepage     userinfo.servehttp.com
// @homepageURL  userinfo.servehttp.com
// @website      userinfo.servehttp.com
// @source       userinfo.servehttp.com
// @supportURL   userinfo.servehttp.com
// @match        https://www.bitmex.com/*
// @grant        none
// @require      https://code.jquery.com/jquery-3.4.1.min.js
// ==/UserScript==

// Tired of BitMEX fees? Get 10% discount on BitMEX fees by using this link to register:
// https://www.bitmex.com/register/Yq1b9D

(function() {
    'use strict';

    // Get the wallet balances
    const getWallet = () => {
        let wallet = {total: 0, avail: 0};
        wallet.total = parseXBTString( $('#header a[href="/app/wallet"].noHover tr:nth-child(1) td:nth-child(2)').text() );
        wallet.avail = parseXBTString( $('#header a[href="/app/wallet"].noHover tr:nth-child(2) td:nth-child(2)').text() );
        return wallet;
    };

    // Parse a String like "0.5 XBT"
    // return the amount Satoshis
    const parseXBTString = (string) => {
        let parts = string.split(' ');
        let number = parts[0].replace(/,/g,'');
        let currency = parts[1];

        switch(currency) {
            case 'XBt':
                return number;
                break;
            case 'μXBT':
                return number*100;
                break;
            case 'mXBT':
                return number*100000;
                break;
            case 'XBT':
                return number*100000000;
                break;
            default:
                return false;
        }
    };

    // Get the price of the order input
    // or the last tick price for market orders
    const getOrderPrice = () => {
        if ( $( '.orderControlsInput #price' ).length ){
            return $('.orderControlsInput #price').val();
        }else{
            return $('.contractDetails .lastTick').text();
        }
    };

    // Fill the order quantity input according to the contract,
    // the available balance and the selected percentage
    //
    // It would be easier to take the XBT value from the order
    // price input but we don't have that for market orders.
    // Hence we do a little more work and read the contract details
    const updateOrderQuantity = (divider) => {

        let contractCurrency = $('.contractDetails .contractStats .lineItem:nth-last-child(2) .value').text().split(" ")[1];

        switch(contractCurrency) {
            case 'USD': // XBTUSD perpetual
                $('#orderQty').val( Math.floor( ( getWallet().total/divider ) / ( 1/getOrderPrice() ) ));
                break;
            case 'XBT': // ETHUSD perpetual, use fairPrice * 0.000001
            case 'mXBT':
            case 'μXBT':
            case 'XBt':
                let ETHUSDPrice = $('.contractDetails .fairPrice a').text() * 0.000001
                $('#orderQty').val( Math.floor( ( getWallet().total/divider ) / ETHUSDPrice ) );
                break;
            default: // All future contracts and ETHXBT perpetual
                $('#orderQty').val( Math.floor( ( getWallet().total/divider ) / getOrderPrice() ) );
        }

        // This just doesn't work because of react
        //$('#orderQty').trigger('input');

        // This does work. "Simply" trigger the input event
        let input = document.getElementById('orderQty');

        let event = new Event('input', { bubbles: true });
        event.simulated = true;
        let tracker = input._valueTracker;
        if (tracker) {
            tracker.setValue("some random shit");
        }
        input.dispatchEvent(event);

    };

    // Insert the percentage buttons below the order widget
    const insertPercentageButtons = () => {
        if ( ( $( '#ketchup_percentages' ).length )) {
            return
        }

        $('.orderControls .orderWrapper').after('<span id="ketchup_percentages"></span>');
        $('#ketchup_percentages').append('<div id="ketchup_percentage_25" class="col-xs-3"><div class="btnWrapper nowrap"><button class="btn-lg btn btn-block btn-primary buy">25%</button></div></div>');
        $('#ketchup_percentages').append('<div id="ketchup_percentage_50" class="col-xs-3"><div class="btnWrapper nowrap"><button class="btn-lg btn btn-block btn-primary buy">50%</button></div></div>');
        $('#ketchup_percentages').append('<div id="ketchup_percentage_75" class="col-xs-3"><div class="btnWrapper nowrap"><button class="btn-lg btn btn-block btn-primary buy">75%</button></div></div>');
        $('#ketchup_percentages').append('<div id="ketchup_percentage_100" class="col-xs-3"><div class="btnWrapper nowrap"><button class="btn-lg btn btn-block btn-primary buy">100%</button></div></div>');

        $('#ketchup_percentage_25' ).click(function() {
            updateOrderQuantity(400000000);
        });
        $('#ketchup_percentage_50' ).click(function() {
            updateOrderQuantity(200000000);
        });
        $('#ketchup_percentage_75' ).click(function() {
            updateOrderQuantity(150000000);
        });
        $('#ketchup_percentage_100' ).click(function() {
            updateOrderQuantity(100000000);
        });


    };


    // Wait for the page to load completely
    $(document).ready(function() {
        // Wait for the page to REALLY load completely
        setTimeout(function() {
            insertPercentageButtons();
        }, 10000);
    });

    // Quick and dirty re-insert the buttons after the
    // user navigated within the page
    $('body' ).click(function() {
        setTimeout(function() {
            insertPercentageButtons();
        }, 1000);
    });

})();

For a screenshot click here

Tested with Chrome, Opera and Firefox.

To make it work in Firefox you have to go to about:config and change the following two settings like this:
security.csp.enable False
security.csp.experimentalEnabled True

Installation:

1. Install Tampermonkey (available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox)
Go to https://www.tampermonkey.net
Click the download button, this will redirect you to the according addon page for your browser. Click the install button.

2. Install the userscript
Click on the new Tampermonkey icon in your browser, then click "Create a new script".
A blank script template will open. Replace everything in it with the userscript above (copy and paste)
click on file, save
refresh the bitmex.com page and wait 10 seconds

3. Tired of BitMEX fees?
Get 10% discount on BitMEX fees by using this link to register