feat: add network connection context provider

DLC-link · Oct 24, 2024 · c1cd57f · c1cd57f
1 parent 0d18f11
commit c1cd57f
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 40 deletions.
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -13,6 +13,7 @@ import { BitcoinTransactionConfirmationsProvider } from '@providers/bitcoin-quer
 import { BitcoinWalletContextProvider } from '@providers/bitcoin-wallet-context-provider';
 import { EthereumNetworkConfigurationContextProvider } from '@providers/ethereum-network-configuration.provider';
 import { NetworkConfigurationContextProvider } from '@providers/network-configuration.provider';
+import { NetworkConnectionContextProvider } from '@providers/network-connection.provider';
 import { ProofOfReserveContextProvider } from '@providers/proof-of-reserve-context-provider';
 import { RippleNetworkConfigurationContextProvider } from '@providers/ripple-network-configuration.provider';
 import { XRPWalletContextProvider } from '@providers/xrp-wallet-context-provider';
@@ -35,27 +36,29 @@ export function App(): React.JSX.Element {
             <EthereumNetworkConfigurationContextProvider>
               <XRPWalletContextProvider>
                 <BitcoinWalletContextProvider>
-                  <VaultContextProvider>
-                    <BitcoinTransactionConfirmationsProvider>
-                      <BalanceContextProvider>
-                        <ProofOfReserveContextProvider>
-                          <AppLayout>
-                            <Route path="/" element={<PointsPage />} />
-                            <Route path="/my-vaults" element={<MyVaults />} />
-                            {/* <Route path="/how-it-works" element={<About />} /> */}
-                            <Route path="/proof-of-reserve" element={<ProofOfReservePage />} />
-                            <Route path="/attestor-details" element={<AttestorDetailsPage />} />
-                            <Route
-                              path="/attestor-details-select"
-                              element={<AttestorDetailsSelectPage />}
-                            />
-                            <Route path="/merchant-details/:name" element={<MerchantDetails />} />
-                            <Route path="/mint-withdraw" element={<Dashboard />} />
-                          </AppLayout>
-                        </ProofOfReserveContextProvider>
-                      </BalanceContextProvider>
-                    </BitcoinTransactionConfirmationsProvider>
-                  </VaultContextProvider>
+                  <NetworkConnectionContextProvider>
+                    <VaultContextProvider>
+                      <BitcoinTransactionConfirmationsProvider>
+                        <BalanceContextProvider>
+                          <ProofOfReserveContextProvider>
+                            <AppLayout>
+                              <Route path="/" element={<PointsPage />} />
+                              <Route path="/my-vaults" element={<MyVaults />} />
+                              {/* <Route path="/how-it-works" element={<About />} /> */}
+                              <Route path="/proof-of-reserve" element={<ProofOfReservePage />} />
+                              <Route path="/attestor-details" element={<AttestorDetailsPage />} />
+                              <Route
+                                path="/attestor-details-select"
+                                element={<AttestorDetailsSelectPage />}
+                              />
+                              <Route path="/merchant-details/:name" element={<MerchantDetails />} />
+                              <Route path="/mint-withdraw" element={<Dashboard />} />
+                            </AppLayout>
+                          </ProofOfReserveContextProvider>
+                        </BalanceContextProvider>
+                      </BitcoinTransactionConfirmationsProvider>
+                    </VaultContextProvider>
+                  </NetworkConnectionContextProvider>
                 </BitcoinWalletContextProvider>
               </XRPWalletContextProvider>
             </EthereumNetworkConfigurationContextProvider>

diff --git a/src/app/components/account/account.tsx b/src/app/components/account/account.tsx
@@ -3,9 +3,9 @@ import { useDispatch } from 'react-redux';
 
 import { Button, HStack, useBreakpointValue } from '@chakra-ui/react';
 import { AccountMenu } from '@components/account/components/account-menu';
-import { useNetworkConnection } from '@hooks/use-connected';
 import { XRPWallet, xrpWallets } from '@models/wallet';
 import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
+import { NetworkConnectionContext } from '@providers/network-connection.provider';
 import { XRPWalletContext } from '@providers/xrp-wallet-context-provider';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 import { modalActions } from '@store/slices/modal/modal.actions';
@@ -14,7 +14,7 @@ import { Connector, useAccount, useDisconnect } from 'wagmi';
 export function Account(): React.JSX.Element {
   const dispatch = useDispatch();
 
-  const { isConnected } = useNetworkConnection();
+  const { isConnected } = useContext(NetworkConnectionContext);
   const { networkType } = useContext(NetworkConfigurationContext);
 
   const isMobile = useBreakpointValue({ base: true, md: false });

diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx
@@ -2,8 +2,8 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { VStack, useBreakpointValue } from '@chakra-ui/react';
-import { useNetworkConnection } from '@hooks/use-connected';
 import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
+import { NetworkConnectionContext } from '@providers/network-connection.provider';
 import { useAccount } from 'wagmi';
 
 import { Banner } from './components/banner';
@@ -12,7 +12,7 @@ import MobileHeader from './components/mobile-header';
 
 export function Header(): React.JSX.Element {
   const navigate = useNavigate();
-  const { isConnected } = useNetworkConnection();
+  const { isConnected } = useContext(NetworkConnectionContext);
 
   const { networkType } = useContext(NetworkConfigurationContext);
   const { chain: ethereumNetwork } = useAccount();

diff --git a/src/app/components/my-vaults/my-vaults-large.tsx b/src/app/components/my-vaults/my-vaults-large.tsx
@@ -4,16 +4,16 @@ import { HStack } from '@chakra-ui/react';
 import { VaultsListGroupBlankContainer } from '@components/vaults-list/components/vaults-list-group-blank-container';
 import { VaultsListGroupContainer } from '@components/vaults-list/components/vaults-list-group-container';
 import { VaultsList } from '@components/vaults-list/vaults-list';
-import { useNetworkConnection } from '@hooks/use-connected';
 import { BalanceContext } from '@providers/balance-context-provider';
+import { NetworkConnectionContext } from '@providers/network-connection.provider';
 import { VaultContext } from '@providers/vault-context-provider';
 
 import { MyVaultsLargeHeader } from './components/my-vaults-header/my-vaults-header';
 import { MyVaultsLargeLayout } from './components/my-vaults-large.layout';
 import { MyVaultsSetupInformationStack } from './components/my-vaults-setup-information-stack';
 
 export function MyVaultsLarge(): React.JSX.Element {
-  const { isConnected } = useNetworkConnection();
+  const { isConnected } = useContext(NetworkConnectionContext);
   const { dlcBTCBalance, lockedBTCBalance } = useContext(BalanceContext);
 
   const { readyVaults, pendingVaults, fundedVaults, closingVaults, closedVaults, allVaults } =
@@ -31,7 +31,7 @@ export function MyVaultsLarge(): React.JSX.Element {
           <VaultsList
             title={'In Process'}
             height={'475px'}
-            isScrollable={!isConnected && allVaults.length > 0}
+            isScrollable={isConnected && allVaults.length > 0}
           >
             <VaultsListGroupContainer label="Empty Vaults" vaults={readyVaults} />
             <VaultsListGroupContainer label="Pending" vaults={pendingVaults} />
@@ -43,7 +43,7 @@ export function MyVaultsLarge(): React.JSX.Element {
         <VaultsList
           title={'Minted dlcBTC'}
           height={'475px'}
-          isScrollable={!isConnected && fundedVaults.length > 0}
+          isScrollable={isConnected && fundedVaults.length > 0}
         >
           {isConnected ? (
             <VaultsListGroupContainer vaults={fundedVaults} />
@@ -54,7 +54,7 @@ export function MyVaultsLarge(): React.JSX.Element {
         <VaultsList
           title={'Closed Vaults'}
           height={'475px'}
-          isScrollable={!isConnected && closedVaults.length > 0}
+          isScrollable={isConnected && closedVaults.length > 0}
         >
           {isConnected ? (
             <VaultsListGroupContainer vaults={closedVaults} />

diff --git a/src/app/components/network/components/networks-menu.tsx b/src/app/components/network/components/networks-menu.tsx
@@ -10,10 +10,9 @@ import {
   Text,
   useBreakpointValue,
 } from '@chakra-ui/react';
-import { useNetworkConnection } from '@hooks/use-connected';
 import { NetworkConfigurationContext } from '@providers/network-configuration.provider';
+import { NetworkConnectionContext } from '@providers/network-connection.provider';
 import { EthereumNetworkID } from 'dlc-btc-lib/models';
-import { chain } from 'ramda';
 import { useAccount, useConfig, useSwitchChain } from 'wagmi';
 
 interface NetworksMenuProps {
@@ -42,7 +41,7 @@ export function NetworksMenu({
   setIsMenuOpen,
 }: NetworksMenuProps): React.JSX.Element | null {
   const { chains } = useConfig();
-  const { isConnected } = useNetworkConnection();
+  const { isConnected } = useContext(NetworkConnectionContext);
   const { chain: ethereumNetwork } = useAccount();
 
   const { networkType } = useContext(NetworkConfigurationContext);
@@ -69,7 +68,7 @@ export function NetworksMenu({
         ) : (
           //TODO: what to display in case of not connected?
           <HStack justifyContent={'space-evenly'}>
-            <Text>{chain ? chain?.name : 'Not Connected'}</Text>
+            <Text>{ethereumNetwork ? ethereumNetwork?.name : 'Not Connected'}</Text>
           </HStack>
         )}
       </MenuButton>

diff --git a/src/app/hooks/use-proof-of-reserve.ts b/src/app/hooks/use-proof-of-reserve.ts
@@ -13,7 +13,6 @@ export function useProofOfReserve(): UseProofOfReserveReturnType {
     queryKey: ['proofOfReserve'],
     queryFn: fetchAllProofOfReserve,
     refetchInterval: 60000,
-    enabled: false,
   });
 
   async function fetchProofOfReserve(merchantAddress?: string): Promise<number> {

diff --git a/src/app/pages/dashboard/dashboard.tsx b/src/app/pages/dashboard/dashboard.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
 import { HStack } from '@chakra-ui/react';
 import { LandingPage } from '@components/mint-unmint/components/landing-page/landing-page';
 import { MintUnmint } from '@components/mint-unmint/mint-unmint';
 import { MyVaultsSmall } from '@components/my-vaults-small/my-vaults-small';
-import { useNetworkConnection } from '@hooks/use-connected';
 import { PageLayout } from '@pages/components/page.layout';
+import { NetworkConnectionContext } from '@providers/network-connection.provider';
 
 import { breakpoints } from '@shared/utils';
 
 export function Dashboard(): React.JSX.Element {
-  const { isConnected } = useNetworkConnection();
+  const { isConnected } = useContext(NetworkConnectionContext);
 
   return (
     <PageLayout>

diff --git a/src/app/providers/balance-context-provider.tsx b/src/app/providers/balance-context-provider.tsx
@@ -1,6 +1,5 @@
 import { createContext, useContext } from 'react';
 
-import { useNetworkConnection } from '@hooks/use-connected';
 import { HasChildren } from '@models/has-children';
 import { useQuery } from '@tanstack/react-query';
 import {
@@ -12,6 +11,7 @@ import { useAccount } from 'wagmi';
 
 import { EthereumNetworkConfigurationContext } from './ethereum-network-configuration.provider';
 import { NetworkConfigurationContext } from './network-configuration.provider';
+import { NetworkConnectionContext } from './network-connection.provider';
 import { XRPWalletContext } from './xrp-wallet-context-provider';
 
 interface VaultContextType {
@@ -29,7 +29,7 @@ export function BalanceContextProvider({ children }: HasChildren): React.JSX.Ele
     ethereumNetworkConfiguration: { dlcBTCContract, dlcManagerContract },
   } = useContext(EthereumNetworkConfigurationContext);
   const { networkType } = useContext(NetworkConfigurationContext);
-  const { isConnected } = useNetworkConnection();
+  const { isConnected } = useContext(NetworkConnectionContext);
   const { userAddress } = useContext(XRPWalletContext);
   const { xrpHandler } = useContext(XRPWalletContext);
 

diff --git a/src/app/providers/network-connection.provider.tsx b/src/app/providers/network-connection.provider.tsx
@@ -0,0 +1,25 @@
+import React, { createContext, useState } from 'react';
+
+import { useNetworkConnection } from '@hooks/use-connected';
+import { HasChildren } from '@models/has-children';
+
+interface NetworConnectionContextProvider {
+  isConnected: boolean;
+}
+export const NetworkConnectionContext = createContext<NetworConnectionContextProvider>({
+  isConnected: false,
+});
+
+export function NetworkConnectionContextProvider({ children }: HasChildren): React.JSX.Element {
+  const { isConnected } = useNetworkConnection();
+
+  return (
+    <NetworkConnectionContext.Provider
+      value={{
+        isConnected,
+      }}
+    >
+      {children}
+    </NetworkConnectionContext.Provider>
+  );
+}