From 0818386e21f09ec14417a1f27400e7cb81f1c858 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Fri, 11 Oct 2024 10:15:05 -0700 Subject: [PATCH 1/4] remove commented code --- .../hyperdrive-trading/src/ui/landing/Landing.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/landing/Landing.tsx b/apps/hyperdrive-trading/src/ui/landing/Landing.tsx index efe377da8..197b6ffa0 100644 --- a/apps/hyperdrive-trading/src/ui/landing/Landing.tsx +++ b/apps/hyperdrive-trading/src/ui/landing/Landing.tsx @@ -8,21 +8,6 @@ export function Landing(): ReactElement | null {
- {/* TODO: Implement filter buttons -
- - - -
*/}
From e234949ceb41d70122a1996312574ab249c58b08 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Fri, 11 Oct 2024 10:51:10 -0700 Subject: [PATCH 2/4] Persist chain filter into route search param --- .../src/ui/markets/PoolsList.tsx | 24 ++++++++++++++----- .../src/ui/routes/index.tsx | 5 ++++ 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx index 28c010272..49afe22a0 100644 --- a/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx @@ -11,6 +11,7 @@ import { BarsArrowDownIcon, } from "@heroicons/react/20/solid"; import { QueryStatus, useQuery } from "@tanstack/react-query"; +import { useNavigate, useSearch } from "@tanstack/react-router"; import { getPublicClient } from "@wagmi/core"; import { ReactElement, ReactNode, useMemo, useRef, useState } from "react"; import { ZERO_ADDRESS } from "src/base/constants"; @@ -25,6 +26,7 @@ import LoadingState from "src/ui/base/components/LoadingState"; import { MultiSelect } from "src/ui/base/components/MultiSelect"; import { NonIdealState } from "src/ui/base/components/NonIdealState"; import { Well } from "src/ui/base/components/Well/Well"; +import { LANDING_ROUTE } from "src/ui/landing/routes"; import { PoolRow, PoolRowProps } from "src/ui/markets/PoolRow"; import { PublicClient } from "viem"; import { useChainId } from "wagmi"; @@ -41,6 +43,8 @@ type SortOption = (typeof sortOptions)[number]; export function PoolsList(): ReactElement { const { pools: allPools, status } = usePoolsList(); + const { chains: selectedChains, assets } = useSearch({ from: LANDING_ROUTE }); + const navigate = useNavigate({ from: LANDING_ROUTE }); const [sort, setSort] = useState("TVL"); // Sync filters with pools @@ -88,14 +92,13 @@ export function PoolsList(): ReactElement { }; }, [allPools]); - const [selectedChains, setSelectedChains] = useState([]); const [selectedAssets, setSelectedAssets] = useState([]); // Filter and sort pools const selectedPools = allPools ?.filter((pool) => { if ( - selectedChains.length && + selectedChains?.length && !selectedChains.includes(pool.hyperdrive.chainId) ) { return false; @@ -157,13 +160,22 @@ export function PoolsList(): ReactElement { {filters && filters.chains.length > 1 && ( + navigate({ + search: (current) => { + return { + ...current, + chains, + }; + }, + }) + } displayValue={ - selectedChains.length === 1 + selectedChains?.length === 1 ? appConfig.chains[selectedChains[0]].name : `${ - selectedChains.length || filters?.chains.length + selectedChains?.length || filters?.chains.length } chains` } searchEnabled diff --git a/apps/hyperdrive-trading/src/ui/routes/index.tsx b/apps/hyperdrive-trading/src/ui/routes/index.tsx index e380e3569..c100004af 100644 --- a/apps/hyperdrive-trading/src/ui/routes/index.tsx +++ b/apps/hyperdrive-trading/src/ui/routes/index.tsx @@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router"; import { Page } from "src/ui/app/Page"; import { Landing } from "src/ui/landing/Landing"; import { LANDING_ROUTE } from "src/ui/landing/routes"; +import { z } from "zod"; export const Route = createFileRoute(LANDING_ROUTE)({ component: () => ( @@ -9,4 +10,8 @@ export const Route = createFileRoute(LANDING_ROUTE)({ ), + validateSearch: z.object({ + chains: z.array(z.number()).optional(), + assets: z.array(z.string()).optional(), + }), }); From 25af0f06a9e01d070308d51c41eaef05e9de2560 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Fri, 11 Oct 2024 10:55:14 -0700 Subject: [PATCH 3/4] Persist asset filters in search params --- .../src/ui/markets/PoolsList.tsx | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx index 49afe22a0..3049af02d 100644 --- a/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx @@ -43,7 +43,9 @@ type SortOption = (typeof sortOptions)[number]; export function PoolsList(): ReactElement { const { pools: allPools, status } = usePoolsList(); - const { chains: selectedChains, assets } = useSearch({ from: LANDING_ROUTE }); + const { chains: selectedChains, assets: selectedAssets } = useSearch({ + from: LANDING_ROUTE, + }); const navigate = useNavigate({ from: LANDING_ROUTE }); const [sort, setSort] = useState("TVL"); @@ -92,8 +94,6 @@ export function PoolsList(): ReactElement { }; }, [allPools]); - const [selectedAssets, setSelectedAssets] = useState([]); - // Filter and sort pools const selectedPools = allPools ?.filter((pool) => { @@ -105,7 +105,7 @@ export function PoolsList(): ReactElement { } if ( - selectedAssets.length && + selectedAssets?.length && !pool.depositAssets.some(({ symbol }) => selectedAssets.includes(symbol), ) @@ -197,13 +197,22 @@ export function PoolsList(): ReactElement { {filters && filters.assets.length > 1 && ( + navigate({ + search: (current) => { + return { + ...current, + assets, + }; + }, + }) + } displayValue={ - selectedAssets.length === 1 + selectedAssets?.length === 1 ? selectedAssets[0] : `${ - selectedAssets.length || filters.assets.length + selectedAssets?.length || filters.assets.length } assets` } searchEnabled From 7bbf92ef965e164818a3dd38386ed0855a8a18b7 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Fri, 11 Oct 2024 12:27:06 -0700 Subject: [PATCH 4/4] Cleanup layout, remove useRef --- .../src/ui/landing/Landing.tsx | 2 +- .../src/ui/markets/PoolsList.tsx | 17 +++-------------- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/landing/Landing.tsx b/apps/hyperdrive-trading/src/ui/landing/Landing.tsx index 197b6ffa0..4e4ed6c8a 100644 --- a/apps/hyperdrive-trading/src/ui/landing/Landing.tsx +++ b/apps/hyperdrive-trading/src/ui/landing/Landing.tsx @@ -7,7 +7,7 @@ export function Landing(): ReactElement | null {
-
+
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx index 3049af02d..2e1e53abc 100644 --- a/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/PoolsList.tsx @@ -13,7 +13,7 @@ import { import { QueryStatus, useQuery } from "@tanstack/react-query"; import { useNavigate, useSearch } from "@tanstack/react-router"; import { getPublicClient } from "@wagmi/core"; -import { ReactElement, ReactNode, useMemo, useRef, useState } from "react"; +import { ReactElement, ReactNode, useMemo, useState } from "react"; import { ZERO_ADDRESS } from "src/base/constants"; import { isTestnetChain } from "src/chains/isTestnetChain"; import { calculateMarketYieldMultiplier } from "src/hyperdrive/calculateMarketYieldMultiplier"; @@ -139,14 +139,8 @@ export function PoolsList(): ReactElement { } }); - // To prevent jarring layout shifts when no pools match the selected filters, - // the NonIdealState is wrapped in a div with a width set to match the outer - // container's width, which will be the width it rendered at before the - // filter's were changed. - const containerRef = useRef(null); - return ( -
+
{status === "loading" && !selectedPools ? ( ) : selectedPools ? ( @@ -269,12 +263,7 @@ export function PoolsList(): ReactElement {
{!selectedPools.length ? ( - + {allPools?.length ? (