diff --git a/components/UI/TokenSelector.js b/components/UI/TokenSelector.js index 5af79f7d3..069a36dc4 100644 --- a/components/UI/TokenSelector.js +++ b/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 + '¤cyDetails=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}¤cyDetails=true`) const tokens = response.data?.tokens || [] const tokensWithNative = addNativeCurrencyIfNeeded(tokens, excludeNative, searchQuery) diff --git a/pages/token/[[...id]].js b/pages/token/[[...id]].js index 0538c012b..1a9281f85 100644 --- a/pages/token/[[...id]].js +++ b/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¤cyDetails=true&convertCurrencies=${cur}` + const url = `v2/trustlines/token/${selectedToken.issuer}/${selectedToken.currency}?statistics=true¤cyDetails=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' }`} /> -
+
+
+ +
+
{/* Big Token Icon */} token

{token?.currencyDetails?.currency}