Skip to content

Commit

Permalink
preselect fp
Browse files Browse the repository at this point in the history
  • Loading branch information
jeremy-babylonlabs authored and jrwbabylonlab committed Nov 27, 2024
1 parent d353626 commit f17f211
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ 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<FinalityProviderSearchProps> = ({
initialSearchValue,
onSearch,
}) => {
const [searchTerm, setSearchTerm] = useState("");
Expand All @@ -16,6 +18,13 @@ export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
onSearch(debouncedSearchTerm);
}, [debouncedSearchTerm, onSearch]);

useEffect(() => {
if (initialSearchValue) {
setSearchTerm(initialSearchValue);
onSearch(initialSearchValue);
}
}, [initialSearchValue, onSearch]);

const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { FinalityProvider } from "./FinalityProvider";
import { FinalityProviderSearch } from "./FinalityProviderSearch";

export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
initialSearchValue,
selectedFinalityProvider,
onFinalityProviderChange,
onFinalityProvidersLoad,
Expand Down Expand Up @@ -106,7 +107,10 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
<strong>Step-1:</strong> Select a finality provider
</p>
<div className="flex gap-3">
<FinalityProviderSearch onSearch={handleSearch} />
<FinalityProviderSearch
initialSearchValue={initialSearchValue}
onSearch={handleSearch}
/>
</div>
<div className="hidden gap-2 px-4 lg:grid lg:grid-cols-stakingFinalityProvidersDesktop">
<p>Finality Provider</p>
Expand Down
8 changes: 8 additions & 0 deletions src/app/components/Staking/Staking.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
"use client";

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";
Expand Down Expand Up @@ -82,6 +85,10 @@ export const Staking: React.FC<StakingProps> = ({
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);
Expand Down Expand Up @@ -681,6 +688,7 @@ export const Staking: React.FC<StakingProps> = ({
onFinalityProvidersLoad={setFinalityProviders}
selectedFinalityProvider={finalityProvider}
onFinalityProviderChange={handleChooseFinalityProvider}
initialSearchValue={initialSearchFp}
/>
</div>
<div className="divider m-0 lg:divider-horizontal lg:m-0" />
Expand Down
33 changes: 18 additions & 15 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { initBTCCurve } from "@babylonlabs-io/btc-staking-ts";
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { networks } from "bitcoinjs-lib";
import { useCallback, useEffect, useState } from "react";
import { Suspense, useCallback, useEffect, useState } from "react";
import { useLocalStorage } from "usehooks-ts";

import { useTermsAcceptance } from "@/app/hooks/useAcceptTerms";
Expand All @@ -28,6 +28,7 @@ import { Delegations } from "./components/Delegations/Delegations";
import { FAQ } from "./components/FAQ/FAQ";
import { Footer } from "./components/Footer/Footer";
import { Header } from "./components/Header/Header";
import { LoadingView } from "./components/Loading/Loading";
import { ConnectModal } from "./components/Modals/ConnectModal";
import { ErrorModal } from "./components/Modals/ErrorModal";
import { FilterOrdinalsModal } from "./components/Modals/FilterOrdinalsModal";
Expand Down Expand Up @@ -287,7 +288,7 @@ const Home: React.FC<HomeProps> = () => {
});
}
},
[showError, hasSeenFilterOrdinalsModal],
[showError, hasSeenFilterOrdinalsModal, logTermsAcceptance],
);

// Subscribe to account changes
Expand Down Expand Up @@ -374,19 +375,21 @@ const Home: React.FC<HomeProps> = () => {
publicKeyNoCoord={publicKeyNoCoord}
/>
)}
<Staking
btcHeight={paramWithContext?.currentHeight}
isWalletConnected={!!btcWallet}
onConnect={handleConnectModal}
isLoading={isLoadingCurrentParams}
btcWallet={btcWallet}
btcWalletBalanceSat={btcWalletBalanceSat}
btcWalletNetwork={btcWalletNetwork}
address={address}
publicKeyNoCoord={publicKeyNoCoord}
setDelegationsLocalStorage={setDelegationsLocalStorage}
availableUTXOs={availableUTXOs}
/>
<Suspense fallback={<LoadingView />}>
<Staking
btcHeight={paramWithContext?.currentHeight}
isWalletConnected={!!btcWallet}
onConnect={handleConnectModal}
isLoading={isLoadingCurrentParams}
btcWallet={btcWallet}
btcWalletBalanceSat={btcWalletBalanceSat}
btcWalletNetwork={btcWalletNetwork}
address={address}
publicKeyNoCoord={publicKeyNoCoord}
setDelegationsLocalStorage={setDelegationsLocalStorage}
availableUTXOs={availableUTXOs}
/>
</Suspense>
{btcWallet &&
delegations &&
paramWithContext?.nextBlockParams.currentVersion &&
Expand Down
1 change: 1 addition & 0 deletions src/app/types/finalityProviders.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export interface Description {
}

export interface FinalityProvidersProps {
initialSearchValue: string | null;
onFinalityProvidersLoad: Dispatch<
SetStateAction<FinalityProvider[] | undefined>
>;
Expand Down

0 comments on commit f17f211

Please sign in to comment.