diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx index 9ee2e998..15c99b95 100644 --- a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx +++ b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx @@ -1,29 +1,27 @@ import { useDebounce } from "@uidotdev/usehooks"; +import { useSearchParams } from "next/navigation"; import React, { useEffect, useState } from "react"; import { FiSearch } from "react-icons/fi"; interface FinalityProviderSearchProps { - initialSearchValue: string | null; onSearch: (searchTerm: string) => void; } export const FinalityProviderSearch: React.FC = ({ - initialSearchValue, onSearch, }) => { - const [searchTerm, setSearchTerm] = useState(""); - const debouncedSearchTerm = useDebounce(searchTerm, 300); + // Get the finality provider from the search params + const searchParams = useSearchParams(); + const initialSearchFp = searchParams.get("fp"); - useEffect(() => { - onSearch(debouncedSearchTerm); - }, [debouncedSearchTerm, onSearch]); + const [searchTerm, setSearchTerm] = useState(initialSearchFp); + const debouncedSearchTerm = useDebounce(searchTerm, 300); useEffect(() => { - if (initialSearchValue) { - setSearchTerm(initialSearchValue); - onSearch(initialSearchValue); + if (debouncedSearchTerm) { + onSearch(debouncedSearchTerm); } - }, [initialSearchValue, onSearch]); + }, [debouncedSearchTerm, onSearch]); const handleSearch = (e: React.ChangeEvent) => { setSearchTerm(e.target.value); @@ -38,7 +36,7 @@ export const FinalityProviderSearch: React.FC = ({ diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx index 53188d8d..aac6009a 100644 --- a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx +++ b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx @@ -19,7 +19,6 @@ import { FinalityProvider } from "./FinalityProvider"; import { FinalityProviderSearch } from "./FinalityProviderSearch"; export const FinalityProviders: React.FC = ({ - initialSearchValue, selectedFinalityProvider, onFinalityProviderChange, onFinalityProvidersLoad, @@ -107,10 +106,7 @@ export const FinalityProviders: React.FC = ({ Step-1: Select a finality provider

- +

Finality Provider

diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx index 2754de8f..9ff1df24 100644 --- a/src/app/components/Staking/Staking.tsx +++ b/src/app/components/Staking/Staking.tsx @@ -2,7 +2,6 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"; import { networks, Transaction } from "bitcoinjs-lib"; -import { useSearchParams } from "next/navigation"; import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react"; import { Tooltip } from "react-tooltip"; import { useLocalStorage } from "usehooks-ts"; @@ -85,10 +84,6 @@ export const Staking: React.FC = ({ btcWalletBalanceSat, availableUTXOs, }) => { - // Get the finality provider from the search params - const searchParams = useSearchParams(); - const initialSearchFp = searchParams.get("fp"); - // Staking form state const [stakingAmountSat, setStakingAmountSat] = useState(0); const [stakingTimeBlocks, setStakingTimeBlocks] = useState(0); @@ -688,7 +683,6 @@ export const Staking: React.FC = ({ onFinalityProvidersLoad={setFinalityProviders} selectedFinalityProvider={finalityProvider} onFinalityProviderChange={handleChooseFinalityProvider} - initialSearchValue={initialSearchFp} />
diff --git a/src/app/types/finalityProviders.ts b/src/app/types/finalityProviders.ts index 87306fdc..c1bb1b3a 100644 --- a/src/app/types/finalityProviders.ts +++ b/src/app/types/finalityProviders.ts @@ -19,7 +19,6 @@ export interface Description { } export interface FinalityProvidersProps { - initialSearchValue: string | null; onFinalityProvidersLoad: Dispatch< SetStateAction >;