feat: added new api hooks and global states

babylonlabs-io · Oct 4, 2024 · dcfa1dc · dcfa1dc
1 parent 2b54b34
commit dcfa1dc
Show file tree

Hide file tree

Showing 15 changed files with 437 additions and 430 deletions.
diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx
@@ -3,13 +3,18 @@ import { useEffect, useState } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useLocalStorage } from "usehooks-ts";
 
-import { SignPsbtTransaction } from "@/app/common/utils/psbt";
+import {
+  signPsbtTransaction,
+  SignPsbtTransaction,
+} from "@/app/common/utils/psbt";
 import { LoadingTableList } from "@/app/components/Loading/Loading";
 import { DelegationsPointsProvider } from "@/app/context/api/DelegationsPointsProvider";
 import { useError } from "@/app/context/Error/ErrorContext";
 import { useWallet } from "@/app/context/wallet/WalletProvider";
+import { useDelegations } from "@/app/hooks/useDelegations";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
-import { QueryMeta } from "@/app/types/api";
+import { useAppState } from "@/app/state";
+import { useDelegationState } from "@/app/state/DelegationState";
 import {
   Delegation as DelegationInterface,
   DelegationState,
@@ -32,43 +37,35 @@ import {
 
 import { Delegation } from "./Delegation";
 
-interface DelegationsProps {
-  delegationsAPI: DelegationInterface[];
-  delegationsLocalStorage: DelegationInterface[];
-  globalParamsVersion: GlobalParamsVersion;
-  signPsbtTx: SignPsbtTransaction;
-  pushTx: WalletProvider["pushTx"];
-  queryMeta: QueryMeta;
-  getNetworkFees: WalletProvider["getNetworkFees"];
-}
+export const Delegations = () => {
+  const { currentVersion } = useAppState();
+  const { data: delegationsAPI } = useDelegations();
+  const {
+    walletProvider: btcWallet,
+    address,
+    publicKeyNoCoord,
+    connected,
+    network,
+  } = useWallet();
 
-export const Delegations: React.FC<DelegationsProps> = ({
-  delegationsAPI,
-  delegationsLocalStorage,
-  globalParamsVersion,
-  signPsbtTx,
-  pushTx,
-  queryMeta,
-  getNetworkFees,
-}) => {
-  const { address, publicKeyNoCoord, connected, network } = useWallet();
+  if (!btcWallet || !delegationsAPI || !currentVersion || !network) {
+    return;
+  }
 
   return (
     network && (
       <DelegationsPointsProvider
         publicKeyNoCoord={publicKeyNoCoord}
-        delegationsAPI={delegationsAPI}
+        delegationsAPI={delegationsAPI.delegations}
         isWalletConnected={connected}
         address={address}
       >
         <DelegationsContent
-          delegationsAPI={delegationsAPI}
-          delegationsLocalStorage={delegationsLocalStorage}
-          globalParamsVersion={globalParamsVersion}
-          signPsbtTx={signPsbtTx}
-          pushTx={pushTx}
-          queryMeta={queryMeta}
-          getNetworkFees={getNetworkFees}
+          delegationsAPI={delegationsAPI.delegations}
+          globalParamsVersion={currentVersion}
+          signPsbtTx={signPsbtTransaction(btcWallet)}
+          pushTx={btcWallet.pushTx}
+          getNetworkFees={btcWallet.getNetworkFees}
           address={address}
           btcWalletNetwork={network}
           publicKeyNoCoord={publicKeyNoCoord}
@@ -81,25 +78,21 @@ export const Delegations: React.FC<DelegationsProps> = ({
 
 interface DelegationsContentProps {
   delegationsAPI: DelegationInterface[];
-  delegationsLocalStorage: DelegationInterface[];
   globalParamsVersion: GlobalParamsVersion;
   publicKeyNoCoord: string;
   btcWalletNetwork: networks.Network;
   address: string;
   signPsbtTx: SignPsbtTransaction;
   pushTx: WalletProvider["pushTx"];
-  queryMeta: QueryMeta;
   getNetworkFees: WalletProvider["getNetworkFees"];
   isWalletConnected: boolean;
 }
 
 const DelegationsContent: React.FC<DelegationsContentProps> = ({
   delegationsAPI,
-  delegationsLocalStorage,
   globalParamsVersion,
   signPsbtTx,
   pushTx,
-  queryMeta,
   getNetworkFees,
   address,
   btcWalletNetwork,
@@ -114,6 +107,12 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
   const [selectedDelegationHeight, setSelectedDelegationHeight] = useState<
     number | undefined
   >();
+  const {
+    delegations = [],
+    fetchMoreDelegations,
+    hasMoreDelegations,
+    isLoading,
+  } = useDelegationState();
 
   const shouldShowPoints =
     isApiNormal && !isGeoBlocked && shouldDisplayPoints();
@@ -288,9 +287,9 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
 
   // combine delegations from the API and local storage, prioritizing API data
   const combinedDelegationsData = delegationsAPI
-    ? [...delegationsLocalStorage, ...delegationsAPI]
+    ? [...delegations, ...delegationsAPI]
     : // if no API data, fallback to using only local storage delegations
-      delegationsLocalStorage;
+      delegations;
 
   return (
     <div className="card flex flex-col gap-2 bg-base-300 p-4 shadow-sm lg:flex-1">
@@ -318,9 +317,9 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
             <InfiniteScroll
               className="flex flex-col gap-4 pt-3"
               dataLength={combinedDelegationsData.length}
-              next={queryMeta.next}
-              hasMore={queryMeta.hasMore}
-              loader={queryMeta.isFetchingMore ? <LoadingTableList /> : null}
+              next={fetchMoreDelegations}
+              hasMore={hasMoreDelegations}
+              loader={isLoading ? <LoadingTableList /> : null}
               scrollableTarget="staking-history"
             >
               {combinedDelegationsData?.map((delegation) => {

diff --git a/src/app/components/FAQ/FAQ.tsx b/src/app/components/FAQ/FAQ.tsx
@@ -1,4 +1,4 @@
-import { useVersionInfo } from "@/app/context/api/VersionInfo";
+import { useAppState } from "@/app/state";
 import { getNetworkConfig } from "@/config/network.config";
 
 import { questions } from "./data/questions";
@@ -7,8 +7,8 @@ import { Section } from "./Section";
 interface FAQProps {}
 
 export const FAQ: React.FC<FAQProps> = () => {
+  const { currentVersion } = useAppState();
   const { coinName, networkName } = getNetworkConfig();
-  const versionInfo = useVersionInfo();
 
   return (
     <div className="container mx-auto flex flex-col gap-2 p-6">
@@ -17,7 +17,7 @@ export const FAQ: React.FC<FAQProps> = () => {
         {questions(
           coinName,
           networkName,
-          versionInfo?.currentVersion?.confirmationDepth,
+          currentVersion?.confirmationDepth,
         ).map((question) => (
           <Section
             key={question.title}

diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
@@ -1,4 +1,5 @@
 import { useWallet } from "@/app/context/wallet/WalletProvider";
+import { useAppState } from "@/app/state";
 import { shouldDisplayTestingMsg } from "@/config";
 
 import { ConnectSmall } from "../Connect/ConnectSmall";
@@ -7,16 +8,9 @@ import { Logo } from "../Logo/Logo";
 import { TestingInfo } from "../TestingInfo/TestingInfo";
 import { ThemeToggle } from "../ThemeToggle/ThemeToggle";
 
-interface HeaderProps {
-  loading?: boolean;
-  btcWalletBalanceSat?: number;
-}
-
-export const Header: React.FC<HeaderProps> = ({
-  loading,
-  btcWalletBalanceSat,
-}) => {
+export const Header = () => {
   const { address, open, disconnect } = useWallet();
+  const { totalBalance, isLoading: loading } = useAppState();
 
   return (
     <nav>
@@ -34,7 +28,7 @@ export const Header: React.FC<HeaderProps> = ({
             loading={loading}
             onConnect={open}
             address={address}
-            btcWalletBalanceSat={btcWalletBalanceSat}
+            btcWalletBalanceSat={totalBalance}
             onDisconnect={disconnect}
           />
           <ThemeToggle />
@@ -45,7 +39,7 @@ export const Header: React.FC<HeaderProps> = ({
           <ConnectedSmall
             loading={loading}
             address={address}
-            btcWalletBalanceSat={btcWalletBalanceSat}
+            btcWalletBalanceSat={totalBalance}
             onDisconnect={disconnect}
           />
         </div>

diff --git a/src/app/components/NetworkBadge/NetworkBadge.tsx b/src/app/components/NetworkBadge/NetworkBadge.tsx
@@ -1,21 +1,23 @@
 import Image from "next/image";
+import { twJoin } from "tailwind-merge";
 
+import { useWallet } from "@/app/context/wallet/WalletProvider";
 import { network } from "@/config/network.config";
 import { Network } from "@/utils/wallet/wallet_provider";
 
 import testnetIcon from "./testnet-icon.png";
 
-// This component can also be used rendering based on the network type
-interface NetworkBadgeProps {
-  isWalletConnected: boolean;
-}
+export const NetworkBadge = () => {
+  const { walletProvider } = useWallet();
 
-export const NetworkBadge: React.FC<NetworkBadgeProps> = ({
-  isWalletConnected,
-}) => {
   return (
     <div
-      className={`absolute left-2 ${isWalletConnected ? "top-40 md:top-24 lg:top-32" : "top-24 md:top-24 lg:top-32"}`}
+      className={twJoin(
+        `absolute left-2`,
+        Boolean(walletProvider)
+          ? "top-40 md:top-24 lg:top-32"
+          : "top-24 md:top-24 lg:top-32",
+      )}
     >
       {[Network.SIGNET, Network.TESTNET].includes(network) && (
         <>