search bar on /token page

components/UI/TokenSelector.js

@@ -61,7 +61,9 @@ export default function TokenSelector({
   excludeNative = false,
   destinationAddress = null,
   allOrOne,
-  currencyQueryName
+  currencyQueryName,
+  addParams = true,
+  selectedCurrency = null
 }) {
   const { t } = useTranslation()
   const router = useRouter()
@@ -81,6 +83,12 @@ export default function TokenSelector({
 
   useEffect(() => {
     if (!currencyQueryName) return
+    if(!addParams) {
+      const {pathname, query} = router
+      query.id = [value?.issuer, value?.currency]
+      router.replace({ pathname, query }, null, { shallow: true })
+      return
+    }
     let queryAddList = []
     let queryRemoveList = []
     if (value?.currency && value.currency !== nativeCurrency) {
@@ -142,7 +150,7 @@ export default function TokenSelector({
             tokens = await fetchTrustlinesForDestination(destinationAddress)
           } else {
             // Fallback to original behavior if no destination address
-            const response = await axios('v2/trustlines/tokens?limit=' + limit + '&currencyDetails=true')
+            const response = await axios('v2/trustlines/tokens?limit=' + limit + '&currencyDetails=true&statistics=true')
             tokens = response.data?.tokens || []
             if (!excludeNative) {
               const defaultTokens = [{ currency: nativeCurrency }, ...tokens]
@@ -199,7 +207,7 @@ export default function TokenSelector({
           setCachedSearchResults(tokensWithNative)
         } else {
           // Fallback to original search behavior
-          const response = await axios(`v2/trustlines/tokens/search/${searchQuery}?limit=${limit}&currencyDetails=true`)
+          const response = await axios(`v2/trustlines/tokens/search/${searchQuery}?limit=${limit}&currencyDetails=true&statistics=true`)
           const tokens = response.data?.tokens || []
           const tokensWithNative = addNativeCurrencyIfNeeded(tokens, excludeNative, searchQuery)
           setSearchResults(tokensWithNative)
@@ -226,11 +234,17 @@ export default function TokenSelector({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery, isOpen, destinationAddress])
 
-  const handleSelect = (token) => {
-    onChange(token)
+  const handleSelect = async (token) => {
+    const newToken = await fetchToken(token)
+    onChange(newToken)
     setIsOpen(false)
   }
 
+  const fetchToken = async (token) => {
+    const response = await axios(`v2/trustlines/token/${token?.issuer}/${token?.currency}?statistics=true&currencyDetails=true&convertCurrencies=${selectedCurrency}`)
+    return response.data || null
+  }
+
   // Helper to get icon url if available
   const getTokenIcon = (token) => {
     let imageUrl = tokenImageSrc(token)

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'
@@ -272,9 +273,24 @@ 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={token}
+                onChange={setToken}
+                excludeNative={true}
+                currencyQueryName="currency"
+                addParams={false}
+                selectedCurrency={selectedCurrency}
+              />
+            </div>
+          </div>
           <div className="column-left">
             {/* Big Token Icon */}
             <img