diff --git a/src/components/ChainList.tsx b/src/components/ChainList.tsx index a75403c8a..438cbd8f1 100644 --- a/src/components/ChainList.tsx +++ b/src/components/ChainList.tsx @@ -32,6 +32,7 @@ export const ChainList = () => { } status faucets + redFlags } } } @@ -39,7 +40,7 @@ export const ChainList = () => { const chains = data.allChain.nodes; - const { query, showTestnets, showDeprecated } = useContext(SearchContext); + const { query, showTestnets, showDeprecated, showFlagged } = useContext(SearchContext); const lowerCaseQuery = query.toLowerCase(); const handleFiltering = (chain) => { @@ -48,7 +49,8 @@ export const ChainList = () => { !showTestnets && (chain.faucets.length > 0 || lowerCaseName.includes("testnet")); const isDeprecated = !showDeprecated && chain.status === "deprecated"; - if (isTestnet || isDeprecated) { + const isFlagged = !showFlagged && chain.redFlags?.length > 0; + if (isTestnet || isDeprecated || isFlagged) { return false; } if (query.length > 0) { diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx index e6af8ccbe..25eba3b20 100644 --- a/src/components/Filters.tsx +++ b/src/components/Filters.tsx @@ -17,7 +17,7 @@ import { FaFilter } from "react-icons/fa"; import { SearchContext } from "../context/SearchContext"; export const Filters = () => { - const { showTestnets, showDeprecated, setShowTestnets, setShowDeprecated } = + const { showTestnets, showDeprecated, showFlagged, setShowTestnets, setShowDeprecated, setShowFlagged } = useContext(SearchContext); const handleTestnetsToggle = () => { @@ -28,6 +28,10 @@ export const Filters = () => { setShowDeprecated((state) => !state); }; + const handleFlaggedToggle = () => { + setShowFlagged((state) => !state); + }; + return ( @@ -64,6 +68,7 @@ export const Filters = () => { display="flex" alignItems="center" justifyContent="space-between" + mb="2" > Show Deprecated @@ -74,6 +79,22 @@ export const Filters = () => { isChecked={showDeprecated} /> + + + + Show Flagged + + + + diff --git a/src/context/SearchContext.tsx b/src/context/SearchContext.tsx index 482e66946..8291a1093 100644 --- a/src/context/SearchContext.tsx +++ b/src/context/SearchContext.tsx @@ -25,10 +25,14 @@ export const SearchProvider = ({ children }) => { defaults?.showDeprecated ?? false ); + const [showFlagged, setShowFlagged] = useState( + defaults?.showFlagged ?? false + ); + useEffect(() => { - const str = JSON.stringify({ showTestnets, showDeprecated }); + const str = JSON.stringify({ showTestnets, showDeprecated, showFlagged }); window.localStorage.setItem(LOCALSTORAGE_KEY, str); - }, [showTestnets, showDeprecated]); + }, [showTestnets, showDeprecated, showFlagged]); return ( { setShowTestnets, showDeprecated, setShowDeprecated, + showFlagged, + setShowFlagged }} > {children}