/** * Interactive currency pair lookup for /supported-trading-pairs. * * Mintlify loads every .js file in the content directory on every page * (see https://www.mintlify.com/docs/customize/custom-scripts), so this * script guards all of its work behind the presence of the widget's * element IDs, which only exist on that one page. Listeners are attached * to `document` (event delegation) instead of the widget elements * directly, so they keep working across Mintlify's client-side page * navigation, not just on a hard page load. * * The input behaves as a combobox: clicking/focusing it opens a dropdown * listing every supported currency (grouped into Crypto / Fiat), typing * filters that list live, and picking an item (click, or arrow keys + * Enter) fills the field and runs the lookup. This replaces an earlier * version that used the native + autocomplete, * which has inconsistent, unstylable behavior across browsers. * * MAINTENANCE: PAIRS_DATA is the single source of truth for this widget. * It is generated from supported-trading-pairs.mdx: each crypto entry * mirrors its table row, and each fiat entry is the reverse lookup * (which crypto assets list that fiat currency in "Convert to Fiat"). * When the trading pairs table changes, update PAIRS_DATA to match. */ (async function () { "use strict"; /** * Mintlify's build step prefixes every Tailwind class it finds in MDX * source with "mint-" (e.g. "hidden" -> "mint-hidden", "grid" -> * "mint-grid", "sm:grid-cols-2" -> "sm:mint-grid-cols-2"). That * prefixing only happens to classNames written in the .mdx file * itself; class names assigned at runtime by this script are never * rewritten, so they must be prefixed manually here to match the * compiled CSS. Confirmed empirically by logging an element's * className after Mintlify's build processed it. If Mintlify changes * this prefix in a future version, this helper (and PREFIX below) is * the only thing that needs updating. */ var PREFIX = "mint-"; function mc(classString) { return classString .split(/\s+/) .filter(Boolean) .map(function (token) { var idx = token.lastIndexOf(":"); if (idx === -1) return PREFIX + token; return token.slice(0, idx + 1) + PREFIX + token.slice(idx + 1); }) .join(" "); } var HIDDEN = mc("hidden"); /** * Read data from the table on the page into PAIRS_DATA. */ const PAIRS_DATA = {}; const pairsTable = /** @type {HTMLTableElement} */ document.querySelector('#content-area table'); for (const row of pairsTable.tBodies[0].rows) { const currency = row.cells[0].textContent.trim(); const convertToCrypto = row.cells[1].textContent.trim().split(',').map((s) => s.trim()); const convertToFiat = row.cells[2].textContent.trim().split(',').map((s) => s.trim()); PAIRS_DATA[currency] = {'type': 'crypto', 'crypto': convertToCrypto, 'fiat': convertToFiat}; for (const other of convertToCrypto) { PAIRS_DATA[other] ??= {'type': 'crypto', 'crypto': [], 'fiat': []} PAIRS_DATA[other].crypto.push(currency); } for (const other of convertToFiat) { PAIRS_DATA[other] ??= {'type': 'fiat', 'crypto': [], 'fiat': []} PAIRS_DATA[other].crypto.push(currency); } } for (const pair of Object.values(PAIRS_DATA)) { pair.crypto.sort(); pair.fiat.sort(); } var ALL_CODES = Object.keys(PAIRS_DATA).sort(); var CRYPTO_CODES = ALL_CODES.filter(function (c) { return PAIRS_DATA[c].type === "crypto"; }); var FIAT_CODES = ALL_CODES.filter(function (c) { return PAIRS_DATA[c].type === "fiat"; }); // Combobox state, scoped per-widget-instance via closures below. var activeIndex = -1; // index into the current `visibleCodes` array var visibleCodes = []; // flat list of selectable codes currently shown in the dropdown var currentMatch = null; // last successfully resolved currency code, used by the copy buttons /** * Chip colors are applied as inline styles rather than Tailwind classes. * Border/spacing/shape classes assigned by this script (via mc()) are * proven to work because Mintlify ships CSS for the common gray/border * utilities already used elsewhere on this page. Brand colors like * green/blue tints have not been verified the same way, so inline * styles are used here to guarantee the colors render regardless of * what Mintlify's compiled CSS happens to include. */ var CHIP_COLORS = { crypto: { light: { bg: "#ecfdf5", text: "#047857" }, dark: { bg: "rgba(16, 185, 129, 0.16)", text: "#6ee7b7" } }, fiat: { light: { bg: "#eff6ff", text: "#1d4ed8" }, dark: { bg: "rgba(59, 130, 246, 0.16)", text: "#93c5fd" } } }; var BRAND_ACCENT = "#FDB600"; // matches this site's docs.json "COLOR" variable /** * Some crypto tickers are referenced by a short alias throughout the * source table (e.g. "BTCLN", "TON") even though the row's own * canonical name differs (e.g. "BTC (Lightning)", "GRAM"). ALIASES lets * the search box and dropdown filter recognize the alias while still * keying data and display off the canonical name from the table. */ var ALIASES = {"BTCLN": "BTC (Lightning)", "TON": "GRAM", "DAI": "DAI (ERC-20)"}; var ALIAS_TEXT = {}; Object.keys(ALIASES).forEach(function (alias) { var target = ALIASES[alias]; ALIAS_TEXT[target] = (ALIAS_TEXT[target] ? ALIAS_TEXT[target] + " " : "") + alias; }); function isDark() { return document.documentElement.classList.contains("dark"); } function applyChipColor(el, kind) { var colors = CHIP_COLORS[kind][isDark() ? "dark" : "light"]; el.style.backgroundColor = colors.bg; el.style.color = colors.text; } function normalize(code) { return code.trim().toUpperCase(); } function findMatch(rawValue) { var value = normalize(rawValue); if (PAIRS_DATA[value]) return value; if (ALIASES[value] && PAIRS_DATA[ALIASES[value]]) return ALIASES[value]; for (var i = 0; i < ALL_CODES.length; i++) { if (normalize(ALL_CODES[i]) === value) return ALL_CODES[i]; } return null; } function renderBadges(container, items, kind) { container.innerHTML = ""; if (!items || items.length === 0) { var empty = document.createElement("span"); empty.className = mc("text-sm text-gray-400 dark:text-gray-500"); empty.textContent = "None"; container.appendChild(empty); return; } items.forEach(function (item) { var badge = document.createElement("span"); badge.className = mc("inline-flex items-center rounded-md px-2 py-1 text-xs font-medium"); applyChipColor(badge, kind); badge.textContent = item; container.appendChild(badge); }); } // Re-applies chip colors when the site's dark/light theme is toggled, // since inline styles don't respond to CSS media queries or the // `.dark` class the way Tailwind's `dark:` variants would. function refreshChipColors() { if (!currentMatch) return; var cryptoBox = document.getElementById("currency-pair-lookup-crypto"); if (cryptoBox) renderBadges(cryptoBox, PAIRS_DATA[currentMatch].crypto, "crypto"); if (PAIRS_DATA[currentMatch].type !== "fiat") { var fiatBox = document.getElementById("currency-pair-lookup-fiat"); if (fiatBox) renderBadges(fiatBox, PAIRS_DATA[currentMatch].fiat, "fiat"); } } function runLookup(input) { var empty = document.getElementById("currency-pair-lookup-empty"); var results = document.getElementById("currency-pair-lookup-results"); var notFound = document.getElementById("currency-pair-lookup-notfound"); var notFoundValue = document.getElementById("currency-pair-lookup-notfound-value"); var cryptoBox = document.getElementById("currency-pair-lookup-crypto"); var fiatBox = document.getElementById("currency-pair-lookup-fiat"); if (!empty || !results || !notFound || !cryptoBox || !fiatBox) return; var raw = input.value; if (!raw.trim()) { currentMatch = null; empty.classList.remove(HIDDEN); results.classList.add(HIDDEN); notFound.classList.add(HIDDEN); return; } var match = findMatch(raw); if (!match) { currentMatch = null; empty.classList.add(HIDDEN); results.classList.add(HIDDEN); notFound.classList.remove(HIDDEN); if (notFoundValue) notFoundValue.textContent = raw.trim(); return; } currentMatch = match; empty.classList.add(HIDDEN); notFound.classList.add(HIDDEN); results.classList.remove(HIDDEN); renderBadges(cryptoBox, PAIRS_DATA[match].crypto, "crypto"); // Fiat currencies never convert to other fiat currencies (every fiat // entry has an empty "fiat" list), so showing a "Convert to fiat: // None" column for every fiat lookup is just noise. Only show that // column for crypto lookups. var grid = document.getElementById("currency-pair-lookup-grid"); var fiatBlock = document.getElementById("currency-pair-lookup-fiat-block"); var TWO_COL = mc("sm:grid-cols-2"); if (PAIRS_DATA[match].type === "fiat") { if (fiatBlock) fiatBlock.classList.add(HIDDEN); if (grid) grid.classList.remove(TWO_COL); } else { if (fiatBlock) fiatBlock.classList.remove(HIDDEN); if (grid) grid.classList.add(TWO_COL); renderBadges(fiatBox, PAIRS_DATA[match].fiat, "fiat"); } } // --- Copy buttons ------------------------------------------------------- function copyText(text) { if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } // Fallback for browsers/contexts without the async Clipboard API. return new Promise(function (resolve, reject) { try { var textarea = document.createElement("textarea"); textarea.value = text; textarea.style.position = "fixed"; textarea.style.opacity = "0"; document.body.appendChild(textarea); textarea.focus(); textarea.select(); var ok = document.execCommand("copy"); document.body.removeChild(textarea); if (ok) resolve(); else reject(new Error("execCommand('copy') failed")); } catch (err) { reject(err); } }); } function flashButton(button, message) { if (!button) return; if (button._flashTimer) clearTimeout(button._flashTimer); if (button._originalText === undefined) button._originalText = button.textContent; button.textContent = message; button._flashTimer = setTimeout(function () { button.textContent = button._originalText; button._flashTimer = null; }, 1500); } function handleCopyClick(button) { if (!currentMatch) { flashButton(button, "Nothing to copy"); return; } var data = PAIRS_DATA[currentMatch]; var text = button.id === "currency-pair-lookup-copy-crypto" ? data.crypto.join(", ") : data.fiat.join(", "); if (!text) { flashButton(button, "Nothing to copy"); return; } copyText(text) .then(function () { flashButton(button, "Copied"); }) .catch(function () { flashButton(button, "Couldn't copy"); }); } var COPY_BUTTON_IDS = ["currency-pair-lookup-copy-crypto", "currency-pair-lookup-copy-fiat"]; var COPY_BUTTON_SELECTOR = "#" + COPY_BUTTON_IDS.join(", #"); // Resolve the click to the nearest copy button rather than testing // event.target.id directly. Mintlify's MDX renderer wraps the button's // bare text label in a child Copy, so a click // landing on the visible "Copy" text has event.target === that inner span // (id ""), which the old id check silently ignored -- clicks only // registered on the button's thin padding, producing the intermittent // "nothing happens" failure. closest() walks up from the span to the //