From f17f211a36f1ffdfb102d97ab55b71f2ac14d36a Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
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<FinalityProviderSearchProps> = ({
+  initialSearchValue,
   onSearch,
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -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);
   };
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
index aac6009a..53188d8d 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<FinalityProvidersProps> = ({
+  initialSearchValue,
   selectedFinalityProvider,
   onFinalityProviderChange,
   onFinalityProvidersLoad,
@@ -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>
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<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);
@@ -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" />
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<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 &&
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<FinalityProvider[] | undefined>
   >;