diff --git a/components/Layout/FiltersFrame.js b/components/Layout/FiltersFrame.js index 4ac2d0683..2193ae0f6 100644 --- a/components/Layout/FiltersFrame.js +++ b/components/Layout/FiltersFrame.js @@ -8,10 +8,43 @@ import ViewTogggle from '../UI/ViewToggle' import { TbArrowsSort } from 'react-icons/tb' import { IoMdClose } from 'react-icons/io' +import { FaFilter } from 'react-icons/fa' import { setTabParams, useWidth } from '../../utils' import CurrencySelect from '../UI/CurrencySelect' import { TablePagination } from '@mui/material' +// Filter Indicator Component +function FilterIndicator({ filters }) { + // Check if any filters are active + const activeFilters = Object.entries(filters).filter(([, value]) => + value && value !== '' && value !== null && value !== undefined + ) + + if (activeFilters.length === 0) { + return null + } + + const renderFilterValue = (key, value) => { + + return `${key.charAt(0).toUpperCase() + key.slice(1)} = ${value}` + } + + return ( +
+ + + Filter applied: {activeFilters.map(([key, value], index) => ( + + {index > 0 && index === activeFilters.length - 1 ? ' and ' : ''} + {index > 0 && index < activeFilters.length - 1 ? ', ' : ''} + {renderFilterValue(key, value)} + + ))} + +
+ ) +} + export default function FiltersFrame({ children, order, @@ -33,7 +66,9 @@ export default function FiltersFrame({ setPage, rowsPerPage, setRowsPerPage, - onlyCsv + onlyCsv, + filters = {}, + showFilterIndicator = false }) { const { t } = useTranslation() const router = useRouter() @@ -118,7 +153,7 @@ export default function FiltersFrame({ ) : ( '' - )} + )} {orderList && ( <> @@ -190,7 +225,14 @@ export default function FiltersFrame({ > {children[0]} +
+ {/* Filter Indicator */} + {showFilterIndicator && ( + + )} {children[1]}
diff --git a/pages/tokens.js b/pages/tokens.js index 571bc59b9..05c3a0732 100644 --- a/pages/tokens.js +++ b/pages/tokens.js @@ -465,6 +465,11 @@ export default function Tokens({ setFiltersHide={setFiltersHide} setSelectedCurrency={setSelectedCurrency} selectedCurrency={selectedCurrency} + filters={{ + issuer: issuer || '', + currency: currency || '' + }} + showFilterIndicator={width > 1300 ? filtersHide : !filtersHide} > {/* Left filters */} <>