diff --git a/components/NftsComponent.js b/components/NftsComponent.js index bf276141..4d632c7b 100644 --- a/components/NftsComponent.js +++ b/components/NftsComponent.js @@ -13,7 +13,7 @@ import { nativeCurrency } from '../utils' import { isValidTaxon, nftThumbnail, nftNameLink, ipfsUrl, nftPriceData } from '../utils/nft' -import { nftLink, usernameOrAddress, timeOrDate, fullDateAndTime, niceCurrency, capitalize } from '../utils/format' +import { nftLink, usernameOrAddress, timeOrDate, fullDateAndTime, capitalize } from '../utils/format' import SEO from './SEO' import SearchBlock from './Layout/SearchBlock' @@ -21,6 +21,7 @@ import Tiles from './Tiles' import IssuerSelect from './UI/IssuerSelect' import CheckBox from './UI/CheckBox' import DateAndTimeRange from './UI/DateAndTimeRange' +import TokenSelector from './UI/TokenSelector' import RadioOptions from './UI/RadioOptions' import FormInput from './UI/FormInput' @@ -97,6 +98,21 @@ export default function NftsComponent({ const [issuerTaxonUrlPart, setIssuerTaxonUrlPart] = useState('?view=' + activeView) const [collectionUrlPart, setCollectionUrlPart] = useState(collectionQuery ? '&collection=' + collectionQuery : '') const [filtersHide, setFiltersHide] = useState(false) + const [selectedToken, setSelectedToken] = useState(() => { + if (saleCurrencyIssuer && saleCurrency) { + return { + currency: saleCurrency, + issuer: saleCurrencyIssuer + } + } else if (saleCurrency === nativeCurrency && !saleCurrencyIssuer) { + return { + currency: nativeCurrency + } + } + return { + currency: nativeCurrency + } + }) const controller = new AbortController() @@ -121,7 +137,7 @@ export default function NftsComponent({ const listTabList = [ { value: 'nfts', label: t('tabs.all') }, - { value: 'onSale', label: t('tabs.onSale', { nativeCurrency }) } + { value: 'onSale', label: t('tabs.onSale') } ] let saleDestinationTabList = [] @@ -194,8 +210,11 @@ export default function NftsComponent({ if (listTab === 'onSale') { //destination: "public", "knownBrokers", "publicAndKnownBrokers", "all", "buyNow" listUrlPart = '?list=onSale&destination=' + saleDestinationTab - if (saleCurrencyIssuer && saleCurrency) { - listUrlPart = listUrlPart + '¤cy=' + saleCurrency + '¤cyIssuer=' + saleCurrencyIssuer + if (selectedToken?.currency) { + listUrlPart = listUrlPart + '¤cy=' + selectedToken.currency + if (selectedToken.issuer) { + listUrlPart = listUrlPart + '¤cyIssuer=' + selectedToken.issuer + } } else { listUrlPart = listUrlPart + '¤cy=' + nativeCurrency?.toLowerCase() } @@ -437,7 +456,8 @@ export default function NftsComponent({ includeBurned, includeWithoutMediaData, mintedPeriod, - burnedPeriod + burnedPeriod, + selectedToken ]) useEffect(() => { @@ -519,6 +539,25 @@ export default function NftsComponent({ setTab: setOrder, paramName: 'order' }) + + // Add token parameters + if (selectedToken?.currency) { + queryAddList.push({ + name: 'saleCurrency', + value: selectedToken.currency + }) + if (selectedToken.issuer) { + queryAddList.push({ + name: 'saleCurrencyIssuer', + value: selectedToken.issuer + }) + } else { + queryRemoveList.push('saleCurrencyIssuer') + } + } else { + queryRemoveList.push('saleCurrency') + queryRemoveList.push('saleCurrencyIssuer') + } } else { queryRemoveList.push('saleDestination') queryRemoveList.push('saleCurrency') @@ -552,7 +591,7 @@ export default function NftsComponent({ setTabParams(router, tabsToSet, queryAddList, queryRemoveList) // eslint-disable-next-line react-hooks/exhaustive-deps - }, [order, rawData, listTab, saleDestinationTab, includeBurned, includeWithoutMediaData]) + }, [order, rawData, listTab, saleDestinationTab, includeBurned, includeWithoutMediaData, selectedToken]) const onTaxonInput = (value) => { if (/^\d+$/.test(value) && issuer && isValidTaxon(value)) { @@ -638,7 +677,7 @@ export default function NftsComponent({ (isValidTaxon(taxonQuery) ? ' ' + taxonQuery : '') + (ownerQuery ? ', ' + t('table.owner') + ': ' + ownerQuery : '') + (activeView === 'list' ? ' ' + t('tabs.list') : '') + - (listTab === 'onSale' ? ' ' + t('tabs.onSale', { nativeCurrency }) : '') + + (listTab === 'onSale' ? ' ' + t('tabs.onSale') : '') + (listTab === 'onSale' && (saleDestinationTab === 'buyNow' || saleDestinationTab === 'public') ? ', ' + t('tabs.buyNow') : '') + @@ -701,29 +740,17 @@ export default function NftsComponent({ )} {!burnedPeriod && listTab === 'onSale' && (