entisocial / Tinder FastMatch

// ==UserScript==
// @namespace     https://openuserjs.org/users/entisocial
// @name          Tinder FastMatch
// @description   Shows the image of someone who has already liked you on Tinder. This version also works on iOS using the Shortcut app and the "Execute javascript on a webpage" action (to make it work on iPhone see comment on line 74, for iPad it works out of the box).
// @copyright     2018, entisocial (https://openuserjs.org/users/entisocial)
// @license       MIT
// @version       1.5.1
// @updateURL https://openuserjs.org/meta/entisocial/Tinder_FastMatch.meta.js
// @match       https://tinder.com/*
// @grant         none
// ==/UserScript==

// ==OpenUserJS==
// @author entisocial
// ==/OpenUserJS==

(function() {
    'use strict';
    fetch('https://api.gotinder.com/v2/fast-match/preview', {
        mode: 'cors',
        credentials: 'include',
        headers: new Headers({
            'X-Auth-Token': localStorage.getItem('TinderWeb/APIToken'),

        })
    })
    .then(res => Promise.all([res, res.arrayBuffer()]))
    .then(([res, imgData]) => {
        // Unfortunately, the 'fast-match-count is blocked by not being present in the Access-Control-Expose-Headers response header, so this is only viewable from devtools
        // const likes = res.headers.get('fast-match-count');

        let innerHTML;
        if(!imgData.byteLength) {
            innerHTML = `
                <div class="messageListItem__info D(f) Flx($flx1) Ov(h) Fld(c) P(10px) Ta(c)">
                    <div class="messageListItem__nameAndBadges">
                        <h3 class="messageListItem__name D(ib) Fw($semibold)">No likes pending.</h3>
                    </div>
                    <div class="messageListItem__message Ov(h) Whs(nw) Tov(e)">
                        <span class="text">Like them first!</span>
                    </div>
                </div>
            `;
        } else {
            const img = 'data:image/png;base64,' + btoa(String.fromCharCode.apply(null, new Uint8Array(imgData)));
            const name = 'This is them!';
            const msg = ``;
            innerHTML = `
                <div class="messageListItem__avatar D(ib) Fxg(0) Px(0px) Py(0px) Px(10px)--m Px(20px)--l Py(0px)--ml M(-1px)--s BdB--s Bdc(#fff)--s">
                    <img src="${img}" class="avatar D(ib) Va(m) Bgc($c-placeholder) H(74px) W(74px)" alt="${name}"/>
                </div>
                <div class="messageListItem__info D(f) Flx($flx1) Ov(h) Fld(c)">
                    <div class="messageListItem__nameAndBadges">
                        <h3 class="messageListItem__name D(ib) Fw($semibold)">${name}</h3>
                        <span class="badge D(ib) Bgz(ct) Bgp(c) Bgr(nr) Va(m) badge--gold W(24px) H(24px) Va(tb) Mstart(4px)"></span>
                    </div>
                    <div class="messageListItem__message Ov(h) Whs(nw) Tov(e)">
                        <span class="text">${msg}</span>
                    </div>
                </div>
            `;
        }

        const matchedEl = document.createElement('span');
        matchedEl.className = "D(f) Ai(c) Pos(r)--s";
        matchedEl.style = "background: #f6fafd; border-bottom: 1px solid #e5e9ec";
        matchedEl.innerHTML = innerHTML;

        // const list = document.querySelector('.messageList');
        // list.insertBefore(matchedEl, list.firstChild);

        const setList = () => {
            setTimeout(() => {
                const list = document.querySelector('.messageListItem'); //replace .messageListItem with .matchList if you want to make it work on iphone.
                if (list) list.parentNode.insertBefore(matchedEl, list);
                else setList();
            }, 100);
        };
        setList();
    });
})();

completion(true) //this is to make it friendly to Shortcut for iOS