From 4428a220a36323de79613758ca9bafd2c0e8b4ec Mon Sep 17 00:00:00 2001
From: David Totraev <totraev@gmail.com>
Date: Fri, 27 Sep 2024 00:52:40 +0500
Subject: [PATCH] feat: move wallet provider logic in react context

---
 .../components/Delegations/Delegations.tsx    |  67 +++++---
 src/app/components/Header/Header.tsx          |  15 +-
 src/app/components/Modals/ConnectModal.tsx    |  10 +-
 .../Form/States/WalletNotConnected.tsx        |  12 +-
 src/app/components/Staking/Staking.tsx        |  29 ++--
 src/app/context/Error/ErrorContext.tsx        |  13 +-
 src/app/context/wallet/WalletProvider.tsx     | 160 ++++++++++++++++++
 src/app/page.tsx                              | 146 ++--------------
 src/app/providers.tsx                         |  21 ++-
 9 files changed, 262 insertions(+), 211 deletions(-)
 create mode 100644 src/app/context/wallet/WalletProvider.tsx

diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx
index 17a31e3b..04716366 100644
--- a/src/app/components/Delegations/Delegations.tsx
+++ b/src/app/components/Delegations/Delegations.tsx
@@ -1,4 +1,4 @@
-import { networks } from "bitcoinjs-lib";
+import type { networks } from "bitcoinjs-lib";
 import { useEffect, useState } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useLocalStorage } from "usehooks-ts";
@@ -7,6 +7,7 @@ import { 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 { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { QueryMeta } from "@/app/types/api";
 import {
@@ -35,14 +36,10 @@ interface DelegationsProps {
   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;
 }
 
 export const Delegations: React.FC<DelegationsProps> = ({
@@ -53,36 +50,50 @@ export const Delegations: React.FC<DelegationsProps> = ({
   pushTx,
   queryMeta,
   getNetworkFees,
-  address,
-  btcWalletNetwork,
-  publicKeyNoCoord,
-  isWalletConnected,
 }) => {
+  const { address, publicKeyNoCoord, connected, network } = useWallet();
+
   return (
-    <DelegationsPointsProvider
-      publicKeyNoCoord={publicKeyNoCoord}
-      delegationsAPI={delegationsAPI}
-      isWalletConnected={isWalletConnected}
-      address={address}
-    >
-      <DelegationsContent
+    network && (
+      <DelegationsPointsProvider
+        publicKeyNoCoord={publicKeyNoCoord}
         delegationsAPI={delegationsAPI}
-        delegationsLocalStorage={delegationsLocalStorage}
-        globalParamsVersion={globalParamsVersion}
-        signPsbtTx={signPsbtTx}
-        pushTx={pushTx}
-        queryMeta={queryMeta}
-        getNetworkFees={getNetworkFees}
+        isWalletConnected={connected}
         address={address}
-        btcWalletNetwork={btcWalletNetwork}
-        publicKeyNoCoord={publicKeyNoCoord}
-        isWalletConnected={isWalletConnected}
-      />
-    </DelegationsPointsProvider>
+      >
+        <DelegationsContent
+          delegationsAPI={delegationsAPI}
+          delegationsLocalStorage={delegationsLocalStorage}
+          globalParamsVersion={globalParamsVersion}
+          signPsbtTx={signPsbtTx}
+          pushTx={pushTx}
+          queryMeta={queryMeta}
+          getNetworkFees={getNetworkFees}
+          address={address}
+          btcWalletNetwork={network}
+          publicKeyNoCoord={publicKeyNoCoord}
+          isWalletConnected={connected}
+        />
+      </DelegationsPointsProvider>
+    )
   );
 };
 
-const DelegationsContent: 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,
diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
index a7cdbbd9..451e51cb 100644
--- a/src/app/components/Header/Header.tsx
+++ b/src/app/components/Header/Header.tsx
@@ -1,3 +1,4 @@
+import { useWallet } from "@/app/context/wallet/WalletProvider";
 import { shouldDisplayTestingMsg } from "@/config";
 
 import { ConnectSmall } from "../Connect/ConnectSmall";
@@ -8,19 +9,15 @@ import { ThemeToggle } from "../ThemeToggle/ThemeToggle";
 
 interface HeaderProps {
   loading?: boolean;
-  onConnect: () => void;
-  address: string;
   btcWalletBalanceSat?: number;
-  onDisconnect: () => void;
 }
 
 export const Header: React.FC<HeaderProps> = ({
   loading,
-  onConnect,
-  address,
   btcWalletBalanceSat,
-  onDisconnect,
 }) => {
+  const { address, open, disconnect } = useWallet();
+
   return (
     <nav>
       <div className="bg-base-300 shadow-sm">
@@ -35,10 +32,10 @@ export const Header: React.FC<HeaderProps> = ({
           </div>
           <ConnectSmall
             loading={loading}
-            onConnect={onConnect}
+            onConnect={open}
             address={address}
             btcWalletBalanceSat={btcWalletBalanceSat}
-            onDisconnect={onDisconnect}
+            onDisconnect={disconnect}
           />
           <ThemeToggle />
         </div>
@@ -49,7 +46,7 @@ export const Header: React.FC<HeaderProps> = ({
             loading={loading}
             address={address}
             btcWalletBalanceSat={btcWalletBalanceSat}
-            onDisconnect={onDisconnect}
+            onDisconnect={disconnect}
           />
         </div>
       </div>
diff --git a/src/app/components/Modals/ConnectModal.tsx b/src/app/components/Modals/ConnectModal.tsx
index b37ac034..7bbe0eab 100644
--- a/src/app/components/Modals/ConnectModal.tsx
+++ b/src/app/components/Modals/ConnectModal.tsx
@@ -46,12 +46,10 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
       // Check if the browser wallet is injectable
       if (window[BROWSER]) {
         // Get the name and icon of the injected wallet
-        const name =
-          window[BROWSER].getWalletProviderName &&
-          (await window[BROWSER].getWalletProviderName());
-        const icon =
-          window[BROWSER].getWalletProviderIcon &&
-          (await window[BROWSER].getWalletProviderIcon());
+        const [name, icon] = await Promise.all([
+          window[BROWSER].getWalletProviderName?.(),
+          window[BROWSER].getWalletProviderIcon?.(),
+        ]);
         // Set the name and icon of the injected wallet if they exist
         name && setInjectedWalletProviderName(`${name} (Browser)`);
         icon && setInjectedWalletProviderIcon(icon);
diff --git a/src/app/components/Staking/Form/States/WalletNotConnected.tsx b/src/app/components/Staking/Form/States/WalletNotConnected.tsx
index 455768f2..8a9dd0f4 100644
--- a/src/app/components/Staking/Form/States/WalletNotConnected.tsx
+++ b/src/app/components/Staking/Form/States/WalletNotConnected.tsx
@@ -1,15 +1,13 @@
 import Image from "next/image";
 
+import { useWallet } from "@/app/context/wallet/WalletProvider";
+
 import connectIcon from "./connect-icon.svg";
 import walletIcon from "./wallet-icon.svg";
 
-interface WalletNotConnectedProps {
-  onConnect: () => void;
-}
+export const WalletNotConnected = () => {
+  const { open } = useWallet();
 
-export const WalletNotConnected: React.FC<WalletNotConnectedProps> = ({
-  onConnect,
-}) => {
   return (
     <div className="flex flex-1 flex-col">
       <div className="flex flex-1 flex-col items-center justify-center gap-2 py-12">
@@ -21,7 +19,7 @@ export const WalletNotConnected: React.FC<WalletNotConnectedProps> = ({
           Please connect wallet to start staking
         </p>
       </div>
-      <button className="btn-primary btn" onClick={onConnect}>
+      <button className="btn-primary btn" onClick={open}>
         <Image src={connectIcon} alt="Connect wallet" />
         Connect wallet
       </button>
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index 6f4083a3..5e530b8a 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -1,5 +1,5 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { networks, Transaction } from "bitcoinjs-lib";
+import { Transaction } from "bitcoinjs-lib";
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 import { Tooltip } from "react-tooltip";
 import { useLocalStorage } from "usehooks-ts";
@@ -13,6 +13,7 @@ import { LoadingView } from "@/app/components/Loading/Loading";
 import { useError } from "@/app/context/Error/ErrorContext";
 import { useGlobalParams } from "@/app/context/api/GlobalParamsProvider";
 import { useStakingStats } from "@/app/context/api/StakingStatsProvider";
+import { useWallet } from "@/app/context/wallet/WalletProvider";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { Delegation } from "@/app/types/delegations";
 import { ErrorHandlerParam, ErrorState } from "@/app/types/errors";
@@ -32,7 +33,7 @@ import {
 } from "@/utils/globalParams";
 import { isStakingSignReady } from "@/utils/isStakingSignReady";
 import { toLocalStorageDelegation } from "@/utils/local_storage/toLocalStorageDelegation";
-import { UTXO, WalletProvider } from "@/utils/wallet/wallet_provider";
+import type { UTXO } from "@/utils/wallet/wallet_provider";
 
 import { FeedbackModal } from "../Modals/FeedbackModal";
 import { PreviewModal } from "../Modals/PreviewModal";
@@ -58,14 +59,8 @@ interface OverflowProperties {
 interface StakingProps {
   btcHeight: number | undefined;
   disabled?: boolean;
-  isWalletConnected: boolean;
   isLoading: boolean;
-  onConnect: () => void;
-  btcWallet: WalletProvider | undefined;
   btcWalletBalanceSat?: number;
-  btcWalletNetwork: networks.Network | undefined;
-  address: string | undefined;
-  publicKeyNoCoord: string;
   setDelegationsLocalStorage: Dispatch<SetStateAction<Delegation[]>>;
   availableUTXOs?: UTXO[] | undefined;
 }
@@ -73,17 +68,19 @@ interface StakingProps {
 export const Staking: React.FC<StakingProps> = ({
   btcHeight,
   disabled = false,
-  isWalletConnected,
-  onConnect,
   isLoading,
-  btcWallet,
-  btcWalletNetwork,
-  address,
-  publicKeyNoCoord,
   setDelegationsLocalStorage,
   btcWalletBalanceSat,
   availableUTXOs,
 }) => {
+  const {
+    connected,
+    address,
+    publicKeyNoCoord,
+    walletProvider: btcWallet,
+    network: btcWalletNetwork,
+  } = useWallet();
+
   // Staking form state
   const [stakingAmountSat, setStakingAmountSat] = useState(0);
   const [stakingTimeBlocks, setStakingTimeBlocks] = useState(0);
@@ -537,8 +534,8 @@ export const Staking: React.FC<StakingProps> = ({
       );
     }
     // Wallet is not connected
-    else if (!isWalletConnected) {
-      return <WalletNotConnected onConnect={onConnect} />;
+    else if (!connected) {
+      return <WalletNotConnected />;
     }
     // Wallet is connected but we are still loading the staking params
     else if (isLoading || areMempoolFeeRatesLoading) {
diff --git a/src/app/context/Error/ErrorContext.tsx b/src/app/context/Error/ErrorContext.tsx
index 0b6eb942..8d1653d5 100644
--- a/src/app/context/Error/ErrorContext.tsx
+++ b/src/app/context/Error/ErrorContext.tsx
@@ -6,6 +6,7 @@ import React, {
   useState,
 } from "react";
 
+import { ErrorModal } from "@/app/components/Modals/ErrorModal";
 import {
   ErrorHandlerParam,
   ErrorType,
@@ -92,7 +93,17 @@ export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
   };
 
   return (
-    <ErrorContext.Provider value={value}>{children}</ErrorContext.Provider>
+    <ErrorContext.Provider value={value}>
+      {children}
+      <ErrorModal
+        open={isErrorOpen}
+        errorMessage={error.message}
+        errorState={error.errorState}
+        onClose={hideError}
+        onRetry={retryErrorAction}
+        noCancel={isNoCancel}
+      />
+    </ErrorContext.Provider>
   );
 };
 
diff --git a/src/app/context/wallet/WalletProvider.tsx b/src/app/context/wallet/WalletProvider.tsx
new file mode 100644
index 00000000..bc0c14b9
--- /dev/null
+++ b/src/app/context/wallet/WalletProvider.tsx
@@ -0,0 +1,160 @@
+import type { networks } from "bitcoinjs-lib";
+import {
+  type PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+import { ConnectModal } from "@/app/components/Modals/ConnectModal";
+import { useError } from "@/app/context/Error/ErrorContext";
+import { ErrorState } from "@/app/types/errors";
+import {
+  getPublicKeyNoCoord,
+  isSupportedAddressType,
+  toNetwork,
+} from "@/utils/wallet";
+import { WalletError, WalletErrorType } from "@/utils/wallet/errors";
+import { type WalletProvider as IWalletProvider } from "@/utils/wallet/wallet_provider";
+
+interface WalletContextProps {
+  walletProvider?: IWalletProvider;
+  network?: networks.Network;
+  publicKeyNoCoord: string;
+  address: string;
+  connected: boolean;
+  disconnect: () => void;
+  open: () => void;
+}
+
+const WalletContext = createContext<WalletContextProps>({
+  walletProvider: undefined,
+  network: undefined,
+  connected: false,
+  publicKeyNoCoord: "",
+  address: "",
+  disconnect: () => () => {},
+  open: () => {},
+});
+
+export const WalletProvider = ({ children }: PropsWithChildren) => {
+  const [walletProvider, setWalletProvider] = useState<IWalletProvider>();
+  const [network, setNetwork] = useState<networks.Network>();
+  const [publicKeyNoCoord, setPublicKeyNoCoord] = useState("");
+  const [address, setAddress] = useState("");
+  const [connectModalOpen, setConnectModalOpen] = useState(false);
+
+  const { showError } = useError();
+
+  const disconnect = useCallback(() => {
+    setWalletProvider(undefined);
+    setNetwork(undefined);
+    setPublicKeyNoCoord("");
+    setAddress("");
+  }, []);
+
+  const open = useCallback(() => {
+    setConnectModalOpen(true);
+  }, []);
+
+  const connect = useCallback(
+    async (walletProvider: IWalletProvider) => {
+      // close the modal
+      setConnectModalOpen(false);
+
+      const supportedNetworkMessage =
+        "Only Native SegWit and Taproot addresses are supported. Please switch the address type in your wallet and try again.";
+
+      try {
+        await walletProvider.connectWallet();
+        const address = await walletProvider.getAddress();
+        // check if the wallet address type is supported in babylon
+        const supported = isSupportedAddressType(address);
+        if (!supported) {
+          throw new Error(supportedNetworkMessage);
+        }
+
+        const publicKeyNoCoord = getPublicKeyNoCoord(
+          await walletProvider.getPublicKeyHex(),
+        );
+
+        setWalletProvider(walletProvider);
+        setNetwork(toNetwork(await walletProvider.getNetwork()));
+        setAddress(address);
+        setPublicKeyNoCoord(publicKeyNoCoord.toString("hex"));
+      } catch (error: Error | any) {
+        if (
+          error instanceof WalletError &&
+          error.getType() === WalletErrorType.ConnectionCancelled
+        ) {
+          // User cancelled the connection, hence do nothing
+          return;
+        }
+        let errorMessage;
+        switch (true) {
+          case /Incorrect address prefix for (Testnet \/ Signet|Mainnet)/.test(
+            error.message,
+          ):
+            errorMessage = supportedNetworkMessage;
+            break;
+          default:
+            errorMessage = error.message;
+            break;
+        }
+        showError({
+          error: {
+            message: errorMessage,
+            errorState: ErrorState.WALLET,
+          },
+          retryAction: () => connect(walletProvider),
+        });
+      }
+    },
+    [showError],
+  );
+
+  // Subscribe to account changes
+  useEffect(() => {
+    if (walletProvider) {
+      let once = false;
+      walletProvider.on("accountChanged", () => {
+        if (!once) {
+          connect(walletProvider);
+        }
+      });
+      return () => {
+        once = true;
+      };
+    }
+  }, [walletProvider, connect]);
+
+  const contextValue = useMemo(
+    () => ({
+      walletProvider,
+      network,
+      publicKeyNoCoord,
+      address,
+      connected: Boolean(walletProvider),
+      open,
+      disconnect,
+    }),
+    [walletProvider, network, publicKeyNoCoord, address, open, disconnect],
+  );
+
+  return (
+    <WalletContext.Provider value={contextValue}>
+      {children}
+      <ConnectModal
+        open={connectModalOpen}
+        onClose={setConnectModalOpen}
+        onConnect={connect}
+        connectDisabled={!!address}
+      />
+    </WalletContext.Provider>
+  );
+};
+
+export const useWallet = () => useContext(WalletContext);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index dca08e9c..ee2e0b95 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,8 +2,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 { useEffect } from "react";
 import { useLocalStorage } from "usehooks-ts";
 
 import { network } from "@/config/network.config";
@@ -11,13 +10,7 @@ import { getCurrentGlobalParamsVersion } from "@/utils/globalParams";
 import { calculateDelegationsDiff } from "@/utils/local_storage/calculateDelegationsDiff";
 import { getDelegationsLocalStorageKey } from "@/utils/local_storage/getDelegationsLocalStorageKey";
 import { filterOrdinals } from "@/utils/utxo";
-import { WalletError, WalletErrorType } from "@/utils/wallet/errors";
-import {
-  getPublicKeyNoCoord,
-  isSupportedAddressType,
-  toNetwork,
-} from "@/utils/wallet/index";
-import { Network, WalletProvider } from "@/utils/wallet/wallet_provider";
+import { Network } from "@/utils/wallet/wallet_provider";
 
 import { getDelegations, PaginatedDelegations } from "./api/getDelegations";
 import { getGlobalParams } from "./api/getGlobalParams";
@@ -27,33 +20,27 @@ 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 { ConnectModal } from "./components/Modals/ConnectModal";
-import { ErrorModal } from "./components/Modals/ErrorModal";
 import { NetworkBadge } from "./components/NetworkBadge/NetworkBadge";
 import { Staking } from "./components/Staking/Staking";
 import { Stats } from "./components/Stats/Stats";
 import { Summary } from "./components/Summary/Summary";
 import { useError } from "./context/Error/ErrorContext";
+import { useWallet } from "./context/wallet/WalletProvider";
 import { Delegation, DelegationState } from "./types/delegations";
 import { ErrorState } from "./types/errors";
 
 interface HomeProps {}
 
 const Home: React.FC<HomeProps> = () => {
-  const [btcWallet, setBTCWallet] = useState<WalletProvider>();
-  const [btcWalletNetwork, setBTCWalletNetwork] = useState<networks.Network>();
-  const [publicKeyNoCoord, setPublicKeyNoCoord] = useState("");
-
-  const [address, setAddress] = useState("");
   const {
-    error,
-    isErrorOpen,
-    showError,
-    hideError,
-    retryErrorAction,
-    noCancel,
-    handleError,
-  } = useError();
+    walletProvider: btcWallet,
+    network: btcWalletNetwork,
+    address,
+    publicKeyNoCoord,
+  } = useWallet();
+
+  const { isErrorOpen, showError, handleError } = useError();
+
   const {
     data: paramWithContext,
     isLoading: isLoadingCurrentParams,
@@ -193,90 +180,6 @@ const Home: React.FC<HomeProps> = () => {
     Delegation[]
   >(delegationsLocalStorageKey, []);
 
-  const [connectModalOpen, setConnectModalOpen] = useState(false);
-
-  const handleConnectModal = () => {
-    setConnectModalOpen(true);
-  };
-
-  const handleDisconnectBTC = () => {
-    setBTCWallet(undefined);
-
-    setBTCWalletNetwork(undefined);
-    setPublicKeyNoCoord("");
-    setAddress("");
-  };
-
-  const handleConnectBTC = useCallback(
-    async (walletProvider: WalletProvider) => {
-      // close the modal
-      setConnectModalOpen(false);
-
-      const supportedNetworkMessage =
-        "Only Native SegWit and Taproot addresses are supported. Please switch the address type in your wallet and try again.";
-
-      try {
-        await walletProvider.connectWallet();
-        const address = await walletProvider.getAddress();
-        // check if the wallet address type is supported in babylon
-        const supported = isSupportedAddressType(address);
-        if (!supported) {
-          throw new Error(supportedNetworkMessage);
-        }
-
-        const publicKeyNoCoord = getPublicKeyNoCoord(
-          await walletProvider.getPublicKeyHex(),
-        );
-        setBTCWallet(walletProvider);
-        setBTCWalletNetwork(toNetwork(await walletProvider.getNetwork()));
-        setAddress(address);
-        setPublicKeyNoCoord(publicKeyNoCoord.toString("hex"));
-      } catch (error: Error | any) {
-        if (
-          error instanceof WalletError &&
-          error.getType() === WalletErrorType.ConnectionCancelled
-        ) {
-          // User cancelled the connection, hence do nothing
-          return;
-        }
-        let errorMessage;
-        switch (true) {
-          case /Incorrect address prefix for (Testnet \/ Signet|Mainnet)/.test(
-            error.message,
-          ):
-            errorMessage = supportedNetworkMessage;
-            break;
-          default:
-            errorMessage = error.message;
-            break;
-        }
-        showError({
-          error: {
-            message: errorMessage,
-            errorState: ErrorState.WALLET,
-          },
-          retryAction: () => handleConnectBTC(walletProvider),
-        });
-      }
-    },
-    [showError],
-  );
-
-  // Subscribe to account changes
-  useEffect(() => {
-    if (btcWallet) {
-      let once = false;
-      btcWallet.on("accountChanged", () => {
-        if (!once) {
-          handleConnectBTC(btcWallet);
-        }
-      });
-      return () => {
-        once = true;
-      };
-    }
-  }, [btcWallet, handleConnectBTC]);
-
   // Clean up the local storage delegations
   useEffect(() => {
     if (!delegations?.delegations) {
@@ -322,9 +225,6 @@ const Home: React.FC<HomeProps> = () => {
       <NetworkBadge isWalletConnected={!!btcWallet} />
       <Header
         loading={isLoadingAvailableUTXOs}
-        onConnect={handleConnectModal}
-        onDisconnect={handleDisconnectBTC}
-        address={address}
         btcWalletBalanceSat={btcWalletBalanceSat}
       />
       <div className="container mx-auto flex justify-center p-6">
@@ -341,14 +241,8 @@ const Home: React.FC<HomeProps> = () => {
           <Staking
             disabled={hasGlobalParamsVersionError || hasAvailableUTXOsError}
             btcHeight={paramWithContext?.currentHeight}
-            isWalletConnected={!!btcWallet}
-            onConnect={handleConnectModal}
             isLoading={isLoadingCurrentParams || isLoadingAvailableUTXOs}
-            btcWallet={btcWallet}
             btcWalletBalanceSat={btcWalletBalanceSat}
-            btcWalletNetwork={btcWalletNetwork}
-            address={address}
-            publicKeyNoCoord={publicKeyNoCoord}
             setDelegationsLocalStorage={setDelegationsLocalStorage}
             availableUTXOs={availableUTXOs}
           />
@@ -362,9 +256,6 @@ const Home: React.FC<HomeProps> = () => {
                 globalParamsVersion={
                   paramWithContext.nextBlockParams.currentVersion
                 }
-                publicKeyNoCoord={publicKeyNoCoord}
-                btcWalletNetwork={btcWalletNetwork}
-                address={address}
                 signPsbtTx={signPsbtTransaction(btcWallet)}
                 pushTx={btcWallet.pushTx}
                 queryMeta={{
@@ -373,7 +264,6 @@ const Home: React.FC<HomeProps> = () => {
                   isFetchingMore: isFetchingNextDelegationsPage,
                 }}
                 getNetworkFees={btcWallet.getNetworkFees}
-                isWalletConnected={!!btcWallet}
               />
             )}
           {/* At this point of time is not used */}
@@ -386,20 +276,6 @@ const Home: React.FC<HomeProps> = () => {
       </div>
       <FAQ />
       <Footer />
-      <ConnectModal
-        open={connectModalOpen}
-        onClose={setConnectModalOpen}
-        onConnect={handleConnectBTC}
-        connectDisabled={!!address}
-      />
-      <ErrorModal
-        open={isErrorOpen}
-        errorMessage={error.message}
-        errorState={error.errorState}
-        onClose={hideError}
-        onRetry={retryErrorAction}
-        noCancel={noCancel}
-      />
     </main>
   );
 };
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index bbfde965..efb03643 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -10,6 +10,7 @@ import { ErrorProvider } from "./context/Error/ErrorContext";
 import { GlobalParamsProvider } from "./context/api/GlobalParamsProvider";
 import { StakingStatsProvider } from "./context/api/StakingStatsProvider";
 import { BtcHeightProvider } from "./context/mempool/BtcHeightProvider";
+import { WalletProvider } from "./context/wallet/WalletProvider";
 
 function Providers({ children }: React.PropsWithChildren) {
   const [client] = React.useState(new QueryClient());
@@ -18,15 +19,17 @@ function Providers({ children }: React.PropsWithChildren) {
     <ThemeProvider defaultTheme="dark" attribute="data-theme">
       <QueryClientProvider client={client}>
         <ErrorProvider>
-          <GlobalParamsProvider>
-            <BtcHeightProvider>
-              <StakingStatsProvider>
-                <ReactQueryStreamedHydration>
-                  {children}
-                </ReactQueryStreamedHydration>
-              </StakingStatsProvider>
-            </BtcHeightProvider>
-          </GlobalParamsProvider>
+          <WalletProvider>
+            <GlobalParamsProvider>
+              <BtcHeightProvider>
+                <StakingStatsProvider>
+                  <ReactQueryStreamedHydration>
+                    {children}
+                  </ReactQueryStreamedHydration>
+                </StakingStatsProvider>
+              </BtcHeightProvider>
+            </GlobalParamsProvider>
+          </WalletProvider>
         </ErrorProvider>
         <ReactQueryDevtools
           buttonPosition="bottom-left"