import $ from 'jquery' import AutoComplete from '@tarekraafat/autocomplete.js/dist/autoComplete' import { getTextAdData, fetchTextAdData } from './ad' import { DateTime } from 'luxon' import { appendTokenIcon } from './token_icon' import { escapeHtml } from './utils' import xss from 'xss' const placeHolder = 'Search by address, token symbol, name, transaction hash, or block number' const dataSrc = async (query, id) => { try { // Loading placeholder text const searchInput = document .getElementById(id) searchInput.setAttribute('placeholder', 'Loading...') // Fetch External Data Source const source = await fetch( `/token-autocomplete?q=${query}` ) const data = await source.json() // Post Loading placeholder text searchInput.setAttribute('placeholder', placeHolder) // Returns Fetched data return data } catch (error) { return error } } const resultsListElement = (list, data) => { const info = document.createElement('p') const adv = ` ` info.innerHTML = adv if (data.results.length > 0) { info.innerHTML += `Displaying ${data.results.length} results` } else if (data.query !== '###') { info.innerHTML += `Found ${data.matches.length} matching results for "${data.query}"` } list.prepend(info) fetchTextAdData() } export const searchEngine = (query, record) => { const queryLowerCase = query.toLowerCase() if (record && ( (record.name && record.name.toLowerCase().includes(queryLowerCase)) || (record.symbol && record.symbol.toLowerCase().includes(queryLowerCase)) || (record.address_hash && record.address_hash.toLowerCase().includes(queryLowerCase)) || (record.tx_hash && record.tx_hash.toLowerCase().includes(queryLowerCase)) || (record.block_hash && record.block_hash.toLowerCase().includes(queryLowerCase)) ) ) { let searchResult = '
' searchResult += `
${record.address_hash || record.tx_hash || record.block_hash}
` if (record.type === 'label') { searchResult += `
${record.name}` } else { searchResult += '
' if (record.name) { searchResult += `${escapeHtml(record.name)}` } if (record.symbol) { searchResult += ` (${escapeHtml(record.symbol)})` } if (record.holder_count) { searchResult += ` ${record.holder_count} holder(s)` } if (record.inserted_at) { searchResult += ` (${DateTime.fromISO(record.inserted_at).toLocaleString(DateTime.DATETIME_SHORT)})` } searchResult += '
' } searchResult += '
' const re = new RegExp(query, 'ig') searchResult = searchResult.replace(re, '$&') return searchResult } } const resultItemElement = async (item, data) => { item.style = 'display: flex;' item.innerHTML = `
${data.match}
${data.value.type}
` const $tokenIconContainer = $(item).find(`#token-icon-${data.value.address_hash}`) const $searchInput = $('#main-search-autocomplete') const chainID = $searchInput.data('chain-id') const displayTokenIcons = $searchInput.data('display-token-icons') appendTokenIcon($tokenIconContainer, chainID, data.value.address_hash, data.value.foreign_chain_id, data.value.foreign_token_hash, displayTokenIcons, 15) } const config = (id) => { return { selector: `#${id}`, data: { src: (query) => dataSrc(query, id), cache: false }, placeHolder, searchEngine: (query, record) => searchEngine(query, record), threshold: 2, resultsList: { element: (list, data) => resultsListElement(list, data), noResults: true, maxResults: 100, tabSelect: true }, resultItem: { element: (item, data) => resultItemElement(item, data), highlight: 'autoComplete_highlight' }, query: (input) => { return xss(input) }, events: { input: { focus: () => { if (autoCompleteJS.input.value.length) autoCompleteJS.start() } } } } } const autoCompleteJS = document.querySelector('#main-search-autocomplete') && new AutoComplete(config('main-search-autocomplete')) // eslint-disable-next-line const autoCompleteJSMobile = document.querySelector('#main-search-autocomplete-mobile') && new AutoComplete(config('main-search-autocomplete-mobile')) const selection = (event) => { const selectionValue = event.detail.selection.value if (selectionValue.type === 'contract' || selectionValue.type === 'address' || selectionValue.type === 'label') { window.location = `/address/${selectionValue.address_hash}` } else if (selectionValue.type === 'token') { window.location = `/tokens/${selectionValue.address_hash}` } else if (selectionValue.type === 'transaction') { window.location = `/tx/${selectionValue.tx_hash}` } else if (selectionValue.type === 'block') { window.location = `/blocks/${selectionValue.block_hash}` } } const openOnFocus = (event, type) => { const query = event.target.value if (query) { if (type === 'desktop') { autoCompleteJS.start(query) } else if (type === 'mobile') { autoCompleteJSMobile.start(query) } } else { getTextAdData() .then(({ data: adData, inHouse: _inHouse }) => { if (adData) { if (type === 'desktop') { autoCompleteJS.start('###') } else if (type === 'mobile') { autoCompleteJSMobile.start('###') } } }) } } document.querySelector('#main-search-autocomplete') && document.querySelector('#main-search-autocomplete').addEventListener('selection', function (event) { selection(event) }) document.querySelector('#main-search-autocomplete-mobile') && document.querySelector('#main-search-autocomplete-mobile').addEventListener('selection', function (event) { selection(event) }) document.querySelector('#main-search-autocomplete') && document.querySelector('#main-search-autocomplete').addEventListener('focus', function (event) { openOnFocus(event, 'desktop') }) document.querySelector('#main-search-autocomplete-mobile') && document.querySelector('#main-search-autocomplete-mobile').addEventListener('focus', function (event) { openOnFocus(event, 'mobile') })