search bar on /token page (#584)

* Add a search bar on the /token page

* reset delay in setTimeout

* fix search block

* reset searchblock

* fix using the popup

* prettify

* prettify, remove currencyQueryName

* move token page specific code to the token page

* Remove not needed flag for api endpoint

* remove not needed api flags - part 2

* remove added fetch from the token selector component, rename function

* clean up

* image fix on mobile

---------

Co-authored-by: Viacheslav Bakshaev <[email protected]>

Author: pandablue0809

components/UI/TokenSelector.js

@@ -142,6 +142,7 @@ export default function TokenSelector({
             tokens = await fetchTrustlinesForDestination(destinationAddress)
           } else {
             // Fallback to original behavior if no destination address
+            // &statistics=true - shall we get USD prices and show them?
             const response = await axios('v2/trustlines/tokens?limit=' + limit + '&currencyDetails=true')
             tokens = response.data?.tokens || []
             if (!excludeNative) {
@@ -199,6 +200,7 @@ export default function TokenSelector({
           setCachedSearchResults(tokensWithNative)
         } else {
           // Fallback to original search behavior
+          // &statistics=true - shall we get USD prices and show them?
           const response = await axios(`v2/trustlines/tokens/search/${searchQuery}?limit=${limit}&currencyDetails=true`)
           const tokens = response.data?.tokens || []
           const tokensWithNative = addNativeCurrencyIfNeeded(tokens, excludeNative, searchQuery)

pages/token/[[...id]].js

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import SEO from '../../components/SEO'
+import TokenSelector from '../../components/UI/TokenSelector'
 import { tokenClass } from '../../styles/pages/token.module.scss'
 import { niceNumber, shortNiceNumber, fullNiceNumber, AddressWithIconFilled } from '../../utils/format'
 import { axiosServer, getFiatRateServer, passHeaders } from '../../utils/axios'
@@ -97,6 +98,7 @@ export default function TokenPage({
   const router = useRouter()
   const [token, setToken] = useState(initialData)
   const [loading, setLoading] = useState(false)
+  const [selectedToken, setSelectedToken] = useState(initialData)
   const errorMessage = initialErrorMessage || ''
   const firstRenderRef = useRef(true)
 
@@ -115,11 +117,11 @@ export default function TokenPage({
     }
   }, [initialData, initialErrorMessage, router])
 
-  const getHistoricalRates = async () => {
+  const getData = async () => {
     setLoading(true)
     const cur = selectedCurrency?.toLowerCase()
     if (!cur) return
-    const url = `v2/trustlines/token/${initialData.issuer}/${initialData.currency}?statistics=true&currencyDetails=true&convertCurrencies=${cur}`
+    const url = `v2/trustlines/token/${selectedToken.issuer}/${selectedToken.currency}?statistics=true&currencyDetails=true&convertCurrencies=${cur}`
     const res = await axiosServer({
       method: 'get',
       url
@@ -136,11 +138,18 @@ export default function TokenPage({
       firstRenderRef.current = false
       return
     }
-    getHistoricalRates()
+    getData()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedCurrency])
-  // Helper: price line as "fiat (XRP)" using historical rate when available
+  }, [selectedCurrency, selectedToken])
+
+  useEffect(() => {
+    const { pathname, query } = router
+    query.id = [selectedToken?.issuer, selectedToken?.currency]
+    router.replace({ pathname, query }, null, { shallow: true })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedToken])
 
+  // Helper: price line as "fiat (XRP)" using historical rate when available
   const priceLine = ({ priceNative, priceFiat }) => {
     const price = priceNative
     return (
@@ -272,16 +281,26 @@ export default function TokenPage({
           token.issuerDetails?.service || token.issuerDetails?.username || 'Token Details'
         }`}
       />
-
       <div className={tokenClass}>
         <div className="content-profile">
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center'
+            }}
+          >
+            <div style={{ width: isSsrMobile ? '100%' : '80%', marginBottom: '20px' }}>
+              <TokenSelector value={selectedToken} onChange={setSelectedToken} excludeNative={true} />
+            </div>
+          </div>
           <div className="column-left">
             {/* Big Token Icon */}
             <img
               alt="token"
               src={tokenImageSrc(token)}
               className="token-image"
-              style={{ width: '100%', height: 'auto' }}
+              style={{ width: 'calc(100% - 4px)', height: 'auto' }}
             />
             <h1>{token?.currencyDetails?.currency}</h1>