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 */}
<>