From 0f9666ebd47ac93d4e9f1e1286d939a82021082b Mon Sep 17 00:00:00 2001 From: pandablue0809 Date: Tue, 19 Aug 2025 14:07:40 +0900 Subject: [PATCH 1/3] add filterIndicator --- components/Layout/FiltersFrame.js | 46 +++++++++++++++++++++++++++++-- pages/tokens.js | 5 ++++ 2 files changed, 49 insertions(+), 2 deletions(-) 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 */} <> From 3aa7f0777d229aba500e38c978a6e3faf29a9933 Mon Sep 17 00:00:00 2001 From: Viacheslav Bakshaev Date: Sat, 23 Aug 2025 17:39:52 +0300 Subject: [PATCH 2/3] refactor --- components/Layout/FiltersFrame.js | 34 ++++++++++++++----------------- pages/tokens.js | 13 ++++++------ 2 files changed, 21 insertions(+), 26 deletions(-) diff --git a/components/Layout/FiltersFrame.js b/components/Layout/FiltersFrame.js index 2193ae0f6..0fd97358c 100644 --- a/components/Layout/FiltersFrame.js +++ b/components/Layout/FiltersFrame.js @@ -12,35 +12,36 @@ import { FaFilter } from 'react-icons/fa' import { setTabParams, useWidth } from '../../utils' import CurrencySelect from '../UI/CurrencySelect' import { TablePagination } from '@mui/material' +import { capitalize, shortHash } from '../../utils/format' // 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 + 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}` + + const renderFilterValue = (key, value) => { + return capitalize(key) + ' = ' + shortHash(value) } - + return (
- Filter applied: {activeFilters.map(([key, value], index) => ( + Filter applied:{' '} + {activeFilters.map(([key, value], index) => ( {index > 0 && index === activeFilters.length - 1 ? ' and ' : ''} {index > 0 && index < activeFilters.length - 1 ? ', ' : ''} {renderFilterValue(key, value)} ))} - +
) } @@ -67,8 +68,7 @@ export default function FiltersFrame({ rowsPerPage, setRowsPerPage, onlyCsv, - filters = {}, - showFilterIndicator = false + filters }) { const { t } = useTranslation() const router = useRouter() @@ -153,7 +153,7 @@ export default function FiltersFrame({ ) : ( '' - )} + )} {orderList && ( <> @@ -225,14 +225,10 @@ export default function FiltersFrame({ > {children[0]} - +
{/* Filter Indicator */} - {showFilterIndicator && ( - - )} + {filters && (width > 1300 ? filtersHide : !filtersHide) && } {children[1]}
diff --git a/pages/tokens.js b/pages/tokens.js index 05c3a0732..7f0656661 100644 --- a/pages/tokens.js +++ b/pages/tokens.js @@ -469,7 +469,6 @@ export default function Tokens({ issuer: issuer || '', currency: currency || '' }} - showFilterIndicator={width > 1300 ? filtersHide : !filtersHide} > {/* Left filters */} <> @@ -563,8 +562,8 @@ export default function Tokens({ <> {data.map((token, i) => { return ( - router.push(`/token/${token.issuer}/${token.currency}`)} > @@ -684,8 +683,8 @@ export default function Tokens({ <> {data.map((token, i) => { return ( - router.push(`/token/${token.issuer}/${token.currency}`)} > @@ -814,11 +813,11 @@ export default function Tokens({ cursor: pointer; transition: background-color 0.2s; } - + .clickable-row:hover { background-color: var(--unaccent-icon); } - + .clickable-row td { position: relative; } From 4f97dfaef71aee647d0777e2189dd85a70a7971f Mon Sep 17 00:00:00 2001 From: Viacheslav Bakshaev Date: Sat, 23 Aug 2025 17:43:46 +0300 Subject: [PATCH 3/3] cleanup --- pages/tokens.js | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/tokens.js b/pages/tokens.js index 4dd585bc6..41c8a664e 100644 --- a/pages/tokens.js +++ b/pages/tokens.js @@ -632,7 +632,6 @@ export default function Tokens({ issuer: issuer || '', currency: currency || '' }} - showFilterIndicator={width > 1300 ? filtersHide : !filtersHide} order={order} setOrder={setOrder} orderList={orderList}