Add Token Search Results

public/locales/ca-CA/translations.json

@@ -531,6 +531,9 @@
   "asset_class": null,
   "trading_pairs": null,
   "deleted": null,
+  "holders": null,
+  "trustlines": null,
+  "website": null,
   "assets.mpt_tab_title": null,
   "assets.no_mpts_message": null,
   "transaction_type_name_MPTokenIssuanceCreate": null,
@@ -553,5 +556,6 @@
   "can_escrow": null,
   "can_trade": null,
   "can_transfer": null,
-  "can_clawback": null
+  "can_clawback": null,
+  "search_results_banner": null
 }

public/locales/en-US/translations.json

@@ -21,7 +21,7 @@
   "explorer": "Explorer",
   "xrpl_org": "XRPL.org",
   "github": "GitHub",
-  "header.search.placeholder": "Search by Address, Ledger or Txn",
+  "header.search.placeholder": "Search by Token, Address, Ledger or Txn",
   "xrp": "XRP",
   "xrpl_explorer": "XRPL Explorer",
   "ledgers": "Ledgers",
@@ -540,6 +540,9 @@
   "asset_class": "Asset Class",
   "trading_pairs": "Trading Pairs",
   "deleted": "Deleted",
+  "holders": "HOLDERS: {{holders}}",
+  "trustlines": " TRUSTLINES: {{trustlines}}",
+  "website": "Wesbite",
   "mpt_issuance_id": "MPT Issuance ID",
   "asset_scale": "Asset Scale",
   "metadata": "Metadata",
@@ -553,5 +556,6 @@
   "can_escrow": "Can Escrow",
   "can_trade": "Can Trade",
   "can_transfer": "Can Transfer",
-  "can_clawback": "Can Clawback"
+  "can_clawback": "Can Clawback",
+  "search_results_banner": "Token search by name and account is now available! Try searching for USD"
 }

public/locales/es-ES/translations.json

@@ -527,6 +527,9 @@
   "asset_class": null,
   "trading_pairs": null,
   "deleted": null,
+  "holders": null,
+  "trustlines": null,
+  "website": null,
   "assets.mpt_tab_title": null,
   "assets.no_mpts_message": null,
   "transaction_type_name_MPTokenIssuanceCreate": null,
@@ -549,5 +552,6 @@
   "can_escrow": null,
   "can_trade": null,
   "can_transfer": null,
-  "can_clawback": null
+  "can_clawback": null,
+  "search_results_banner": null
 }

public/locales/fr-FR/translations.json

@@ -528,6 +528,9 @@
   "asset_class": null,
   "trading_pairs": null,
   "deleted": null,
+  "holders": null,
+  "trustlines": null,
+  "website": null,
   "assets.mpt_tab_title": null,
   "assets.no_mpts_message": null,
   "transaction_type_name_MPTokenIssuanceCreate": null,
@@ -550,5 +553,6 @@
   "can_escrow": null,
   "can_trade": null,
   "can_transfer": null,
-  "can_clawback": null
+  "can_clawback": null,
+  "search_results_banner": null
 }

public/locales/ja-JP/translations.json

@@ -527,6 +527,9 @@
   "asset_class": null,
   "trading_pairs": null,
   "deleted": null,
+  "holders": null,
+  "trustlines": null,
+  "website": null,
   "assets.mpt_tab_title": null,
   "assets.no_mpts_message": null,
   "transaction_type_name_MPTokenIssuanceCreate": null,
@@ -549,5 +552,6 @@
   "can_escrow": null,
   "can_trade": null,
   "can_transfer": null,
-  "can_clawback": null
+  "can_clawback": null,
+  "search_results_banner": null
 }

public/locales/ko-KR/translations.json

@@ -525,6 +525,9 @@
   "asset_class": null,
   "trading_pairs": null,
   "deleted": null,
+  "holders": null,
+  "trustlines": null,
+  "website": null,
   "assets.mpt_tab_title": null,
   "assets.no_mpts_message": null,
   "transaction_type_name_MPTokenIssuanceCreate": null,
@@ -547,5 +550,6 @@
   "can_escrow": null,
   "can_trade": null,
   "can_transfer": null,
-  "can_clawback": null
+  "can_clawback": null,
+  "search_results_banner": null
 }

server/routes/v1/index.js

@@ -2,6 +2,7 @@ const api = require('express').Router()
 const getTokenDiscovery = require('./tokenDiscovery')
 const getHealth = require('./health')
 const getCurrentMetrics = require('./currentMetrics')
+const getTokensSearch = require('./tokens')
 
 if (process.env.VITE_ENVIRONMENT === 'mainnet') {
   api.use('/token/top', getTokenDiscovery)
@@ -13,6 +14,7 @@ if (process.env.VITE_ENVIRONMENT !== 'custom') {
   // these require a single hardcoded rippled node to connect to
   api.use('/health', getHealth)
   api.use('/metrics', getCurrentMetrics)
+  api.use('/tokens/search/:query', getTokensSearch)
 }
 
 module.exports = api

server/routes/v1/tokens.js

@@ -0,0 +1,121 @@
+const axios = require('axios')
+const log = require('../../lib/logger')({ name: 'tokens search' })
+
+const REFETCH_INTERVAL = 60 * 60 * 1000 // 1 hour
+const XRPLMETA_QUERY_LIMIT = 1000
+const cachedTokenSearchList = { tokens: [], last_updated: null }
+
+const parseCurrency = (currency) => {
+  const NON_STANDARD_CODE_LENGTH = 40
+  const LP_TOKEN_IDENTIFIER = '03'
+
+  const hexToString = (hex) => {
+    let string = ''
+    for (let i = 0; i < hex.length; i += 2) {
+      const part = hex.substring(i, i + 2)
+      const code = parseInt(part, 16)
+      if (!isNaN(code) && code !== 0) {
+        string += String.fromCharCode(code)
+      }
+    }
+    return string
+  }
+
+  return currency.length === NON_STANDARD_CODE_LENGTH &&
+    currency?.substring(0, 2) !== LP_TOKEN_IDENTIFIER
+    ? hexToString(currency)
+    : currency
+}
+
+async function fetchXRPLMetaTokens(offset) {
+  log.info(`caching tokens from ${process.env.XRPL_META_URL}`)
+  return axios
+    .get(
+      `https://${process.env.XRPL_META_URL}/tokens?trust_level=1&trust_level=2&trust_level=3`,
+      {
+        params: {
+          sort_by: 'holders',
+          offset,
+          limit: XRPLMETA_QUERY_LIMIT,
+        },
+      },
+    )
+    .then((resp) => resp.data)
+    .catch((e) => log.error(e))
+}
+
+async function cacheXRPLMetaTokens() {
+  let offset = 0
+  let tokensDataBatch = []
+  const allTokensFetched = []
+
+  tokensDataBatch = await fetchXRPLMetaTokens(0)
+  const { count } = tokensDataBatch
+  while (offset < count) {
+    allTokensFetched.push(...tokensDataBatch.tokens)
+    offset += XRPLMETA_QUERY_LIMIT
+    // eslint-disable-next-line no-await-in-loop
+    tokensDataBatch = await fetchXRPLMetaTokens(offset)
+  }
+
+  cachedTokenSearchList.tokens = allTokensFetched.filter(
+    (result) =>
+      result.metrics.trustlines > 50 &&
+      result.metrics.holders > 50 &&
+      result.metrics.marketcap > 0 &&
+      result.metrics.volume_7d > 0,
+  )
+  cachedTokenSearchList.last_updated = Date.now()
+
+  // nonstandard from XRPLMeta, check for hex codes in currencies and store parsed
+  cachedTokenSearchList.tokens.map((token) => ({
+    ...token,
+    currency: parseCurrency(token.currency),
+  }))
+}
+
+function startCaching() {
+  if (process.env.VITE_ENVIRONMENT !== 'mainnet') {
+    return
+  }
+  cacheXRPLMetaTokens()
+  setInterval(() => cacheXRPLMetaTokens(), REFETCH_INTERVAL)
+}
+
+startCaching()
+
+function queryTokens(tokenList, query) {
+  const sanitizedQuery = query.toLowerCase()
+
+  return tokenList.filter(
+    (token) =>
+      token.currency?.toLowerCase().includes(sanitizedQuery) ||
+      token.meta?.token?.name?.toLowerCase().includes(sanitizedQuery) ||
+      token.meta?.issuer?.name?.toLowerCase().includes(sanitizedQuery) ||
+      token.issuer?.toLowerCase().startsWith(sanitizedQuery),
+  )
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+module.exports = async (req, res) => {
+  try {
+    log.info('getting tokens list for search')
+    const { query } = req.params
+    while (cachedTokenSearchList.tokens.length === 0) {
+      // eslint-disable-next-line no-await-in-loop -- necessary here to wait for cache to be filled
+      await sleep(1000)
+    }
+    const queriedTokens = await queryTokens(cachedTokenSearchList.tokens, query)
+    return res.status(200).json({
+      result: 'success',
+      updated: cachedTokenSearchList.last_updated,
+      tokens: queriedTokens,
+    })
+  } catch (error) {
+    log.error(error)
+    return res.status(error.code || 500).json({ message: error.message })
+  }
+}

src/containers/Header/Search.tsx

@@ -1,13 +1,20 @@
-import { KeyboardEventHandler, useContext } from 'react'
+import {
+  FC,
+  KeyboardEventHandler,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { XrplClient } from 'xrpl-client'
-
 import {
   isValidClassicAddress,
   isValidXAddress,
   classicAddressToXAddress,
 } from 'ripple-address-codec'
+import CloseIcon from '../shared/images/close.png'
+
 import { useAnalytics } from '../shared/analytics'
 import SocketContext from '../shared/SocketContext'
 import {
@@ -33,6 +40,7 @@ import {
   VALIDATOR_ROUTE,
   MPT_ROUTE,
 } from '../App/routes'
+import TokenSearchResults from '../shared/components/TokenSearchResults/TokenSearchResults'
 
 const determineHashType = async (id: string, rippledContext: XrplClient) => {
   try {
@@ -153,6 +161,26 @@ const normalizeAccount = (id: string) => {
   return id
 }
 
+const SearchBanner: FC<{ setIsBannerVisible: (visible: boolean) => void }> = ({
+  setIsBannerVisible,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div className="banner-search">
+      <div className="banner-content">
+        <div>{t('search_results_banner')}</div>
+        <button
+          className="banner-button"
+          type="button"
+          onClick={() => setIsBannerVisible(false)}
+        >
+          <img src={CloseIcon} alt="close-icon" width={10} height={10} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
 export interface SearchProps {
   callback?: Function
 }
@@ -163,6 +191,8 @@ export const Search = ({ callback = () => {} }: SearchProps) => {
   const socket = useContext(SocketContext)
   const navigate = useNavigate()
 
+  const [currentSearchInput, setCurrentSearchInput] = useState('')
+
   const handleSearch = async (id: string) => {
     const strippedId = id.replace(/^["']|["']$/g, '')
     const route = await getRoute(strippedId, socket)
@@ -178,16 +208,40 @@ export const Search = ({ callback = () => {} }: SearchProps) => {
   const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
     if (event.key === 'Enter') {
       handleSearch(event.currentTarget?.value?.trim())
+      setCurrentSearchInput('')
     }
   }
 
+  const [isBannerVisible, setIsBannerVisible] = useState(true)
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setIsBannerVisible(false)
+    }, 10000) // Disappear after 10 seconds
+
+    return () => clearTimeout(timeoutId)
+  }, [])
+
   return (
-    <div className="search">
-      <input
-        type="text"
-        placeholder={t('header.search.placeholder')}
-        onKeyDown={onKeyDown}
-      />
-    </div>
+    <>
+      {process.env.VITE_ENVIRONMENT === 'mainnet' && isBannerVisible && (
+        <SearchBanner setIsBannerVisible={setIsBannerVisible} />
+      )}
+      <div className="search">
+        <input
+          type="text"
+          placeholder={t('header.search.placeholder')}
+          onKeyDown={onKeyDown}
+          value={currentSearchInput}
+          onChange={(e) => setCurrentSearchInput(e.target.value)}
+        />
+        {process.env.VITE_ENVIRONMENT === 'mainnet' && (
+          <TokenSearchResults
+            setCurrentSearchInput={setCurrentSearchInput}
+            currentSearchValue={currentSearchInput}
+          />
+        )}
+      </div>
+    </>
   )
 }