preselect fp (#380)

* feat: preselect fp --------- Co-authored-by: wjrjerome <[email protected]>
babylonlabs-io · Nov 27, 2024 · fc84d24 · fc84d24
1 parent d353626
commit fc84d24
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
@@ -1,4 +1,5 @@
 import { useDebounce } from "@uidotdev/usehooks";
+import { useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { FiSearch } from "react-icons/fi";
 
@@ -9,11 +10,17 @@ interface FinalityProviderSearchProps {
 export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
   onSearch,
 }) => {
-  const [searchTerm, setSearchTerm] = useState("");
+  // Get the finality provider from the search params
+  const searchParams = useSearchParams();
+  const initialSearchFp = searchParams.get("fp");
+
+  const [searchTerm, setSearchTerm] = useState(initialSearchFp);
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
   useEffect(() => {
-    onSearch(debouncedSearchTerm);
+    if (debouncedSearchTerm) {
+      onSearch(debouncedSearchTerm);
+    }
   }, [debouncedSearchTerm, onSearch]);
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -29,7 +36,7 @@ export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
         <input
           type="text"
           placeholder="Search by Name or Public Key"
-          value={searchTerm}
+          value={searchTerm ?? ""}
           onChange={handleSearch}
           className="w-full pl-10 pr-4 py-2 text-sm bg-transparent border-b border-gray-300 focus:outline-none focus:border-primary"
         />

diff --git 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<HomeProps> = () => {
         });
       }
     },
-    [showError, hasSeenFilterOrdinalsModal],
+    [showError, hasSeenFilterOrdinalsModal, logTermsAcceptance],
   );
 
   // Subscribe to account changes
@@ -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 &&