search bar on /token page

components/UI/TokenSelector.js

@@ -61,7 +61,8 @@ export default function TokenSelector({
   excludeNative = false,
   destinationAddress = null,
   allOrOne,
-  currencyQueryName
+  currencyQueryName,
+  addParams = true
 }) {
   const { t } = useTranslation()
   const router = useRouter()
@@ -81,6 +82,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 +149,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 +206,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)

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

@@ -4,8 +4,9 @@ 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 { niceNumber, shortNiceNumber, fullNiceNumber, AddressWithIconFilled, amountFormat } from '../../utils/format'
 import { axiosServer, getFiatRateServer, passHeaders } from '../../utils/axios'
 import { getIsSsrMobile } from '../../utils/mobile'
 import { isAddressOrUsername, nativeCurrency, tokenImageSrc, validateCurrencyCode, xahauNetwork } from '../../utils'
@@ -272,9 +273,33 @@ 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'
+          }}>
+            <span className="input-title" style={{width: isSsrMobile ? '100%' : '80%'}}>
+              Token
+              {token.supply && token.currency && (
+                <span className="grey">
+                  {' '}
+                  - the Limit will be set to the total supply:{' '}
+                  {amountFormat({ value: token.supply, currency: token.currency })}
+                </span>
+              )}
+            </span>
+            <div style={{width: isSsrMobile ? '100%' : '80%', marginBottom: '20px'}}>
+              <TokenSelector
+                value={token}
+                onChange={setToken}
+                excludeNative={true}
+                currencyQueryName="currency"
+                addParams={false}
+              />
+            </div>
+          </div>
           <div className="column-left">
             {/* Big Token Icon */}
             <img