From 371478def17baf2b3c3fef4c128ac7fa33993843 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain
Date: Mon, 25 Nov 2024 16:01:15 +0800
Subject: [PATCH] preselect fp
---
.../FinalityProviderSearch.tsx | 9 +++++
.../FinalityProviders/FinalityProviders.tsx | 6 +++-
src/app/components/Staking/Staking.tsx | 8 +++++
src/app/page.tsx | 33 ++++++++++---------
src/app/types/finalityProviders.ts | 1 +
5 files changed, 41 insertions(+), 16 deletions(-)
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
index 65f3f9b2..9ee2e998 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
@@ -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 = ({
+ initialSearchValue,
onSearch,
}) => {
const [searchTerm, setSearchTerm] = useState("");
@@ -16,6 +18,13 @@ export const FinalityProviderSearch: React.FC = ({
onSearch(debouncedSearchTerm);
}, [debouncedSearchTerm, onSearch]);
+ useEffect(() => {
+ if (initialSearchValue) {
+ setSearchTerm(initialSearchValue);
+ onSearch(initialSearchValue);
+ }
+ }, [initialSearchValue, onSearch]);
+
const handleSearch = (e: React.ChangeEvent) => {
setSearchTerm(e.target.value);
};
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
index 7794ef13..d403d564 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
@@ -19,6 +19,7 @@ import { FinalityProvider } from "./FinalityProvider";
import { FinalityProviderSearch } from "./FinalityProviderSearch";
export const FinalityProviders: React.FC = ({
+ initialSearchValue,
selectedFinalityProvider,
onFinalityProviderChange,
onFinalityProvidersLoad,
@@ -106,7 +107,10 @@ 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 16629d66..2754de8f 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -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";
@@ -82,6 +85,10 @@ 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);
@@ -681,6 +688,7 @@ export const Staking: React.FC = ({
onFinalityProvidersLoad={setFinalityProviders}
selectedFinalityProvider={finalityProvider}
onFinalityProviderChange={handleChooseFinalityProvider}
+ initialSearchValue={initialSearchFp}
/>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 43ac21e7..9d63f6a0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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";
@@ -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";
@@ -287,7 +288,7 @@ const Home: React.FC = () => {
});
}
},
- [showError, hasSeenFilterOrdinalsModal],
+ [showError, hasSeenFilterOrdinalsModal, logTermsAcceptance],
);
// Subscribe to account changes
@@ -374,19 +375,21 @@ const Home: React.FC = () => {
publicKeyNoCoord={publicKeyNoCoord}
/>
)}
-
+ }>
+
+
{btcWallet &&
delegations &&
paramWithContext?.nextBlockParams.currentVersion &&
diff --git a/src/app/types/finalityProviders.ts b/src/app/types/finalityProviders.ts
index c1bb1b3a..87306fdc 100644
--- a/src/app/types/finalityProviders.ts
+++ b/src/app/types/finalityProviders.ts
@@ -19,6 +19,7 @@ export interface Description {
}
export interface FinalityProvidersProps {
+ initialSearchValue: string | null;
onFinalityProvidersLoad: Dispatch<
SetStateAction
>;